使用 document.getElementById('myImg').style.width 而不是 var x = document.getElementById('myImg').style.width< 对我来说似乎很奇怪/strong> 产生不同的结果 谁能解释一下? 这是我的示例代码(下面,实际代码当然要长得多),我希望通过将 document.getElementById('myImg').style.width 存储为变量来尽可能地减少它,但是在加载页面似乎与直觉相反......
<img id="myImg" src="w3javascript.gif" style="width:100px;height:132px;">
<script>
window.onload = function myFunction()
{
var x = document.getElementById('myImg').style.width;
var width = window.innerWidth || document.documentElement.clientWidth;
if(width >= 450){
x = "450px"
}
}
</script>
现在上面的代码产生了不同的结果(我不知道为什么......):
<img id="myImg" src="w3javascript.gif" style="width:100px;height:132px;">
<script>
window.onload = function myFunction()
{
var x = document.getElementById('myImg').style.width;
var width = window.innerWidth || document.documentElement.clientWidth;
if(width >= 450){
document.getElementById('myImg').style.width = "450px"
}
}
</script>
最佳答案
当你这样做时:
var x = document.getElementById('myImg').style.width;
var width = window.innerWidth || document.documentElement.clientWidth;
if(width >= 450){
x = "450px"
}
实际上,您首先将元素的宽度分配给变量 x,然后您用值“450px”覆盖 x,但您没有更改元素。
在第二个示例中,document.getElementById('myImg').style.width = "450px"
实际上设置了元素的宽度,但没有改变变量 x。
为了简化您的代码,您可以使用:
var x = document.getElementById('myImg');
var width = window.innerWidth || document.documentElement.clientWidth;
if(width >= 450){
x.style.width = "450px"
}
关于Javascript getElementById ('id' ).style VS var x,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26250368/