Question

我正在尝试获取用户屏幕大小并调整图像大小以适应他们的屏幕大小我当前的代码可以工作，但仅限于Firefox。在IE和Chrome中，图像永远不会调整大小，有人可以帮助我吗？

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../style.css">
 <script type="text/javascript" src="../javascript.js"></script>
 <script>
 window.onload = function(){ 
var w =screen.availWidth - 20 + "px";
var h =screen.availHeight - 80 + "px";
document.getElementById('full').style= "height:" +  h + ";" + "width:" +  w; +";";
alert(h+w);

checkCookie();
document.getElementsByClassName('box1')[0].addEventListener('click', correct, false); 
document.getElementsByClassName('box1')[0].addEventListener('mouseover', shade, false);
document.getElementsByClassName('box1')[0].addEventListener('mouseout', unshade, false);
document.getElementsByClassName('bg')[0].addEventListener('click', wrong, false);


function shade()
{

document.getElementById('button').style= "background-color: #ADD8E6; opacity:.4;";

}

function unshade()
{

document.getElementById('button').style= " ";

}

function loc()
{
var lo = "OS2.html";

return lo;

} 
}
 </script>

</head>
<body>
<div style="color: red;" onclick=" alert('Open Microsoft Power Point without *searching* for it\nSave it in the documents library (using backstage-view, save as), with the default name');" id="help">
<center>
?
</center>
</div>
<div class="wrap">
    <img id="full" style = "height: 500px; width: 500px;"class="bg" src = "../Pic/desktop.png" >
    <div id="button" style=" " class="box box1"></div>    
</div>








</body>
</html>

谢谢！

Answer 1

而不是

document.getElementById('full').style = "height:" +  h + ";" + "width:" +  w;
+";"; // Useless NaN

你应该使用[Demo]

var s = document.getElementById('full').style;
s.height = h;
s.width = w;

或[Demo]

document.getElementById('full')
    .setAttribute('style', "height:" +  h + ";" + "width:" +  w);

获取客户端屏幕大小并将图像调整大小

1 个答案: