我正在尝试获取用户的屏幕大小并调整图像大小以适合他们的屏幕大小我当前的代码可以工作，但只能在 firefox 中使用。在 IE 和 Chrome 中，图像永远不会调整大小有人可以帮助我吗？
http://jsfiddle.net/dwcribbs/ZK4tK/2/
<!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>
谢谢!
最佳答案
代替
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);
关于javascript - 获取客户端屏幕尺寸并将图像调整为它，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22277407/