Javascript getElementById ('id' ).style VS var x

Question

使用 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>

Answer 1

当你这样做时:

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"
}