Javascript getElementById（'；id'；）。样式与变量x

在我看来，使用document.getElementById（'myImg'）.style.width而不是var x=document.getElementById（'myImg'）.style.width会产生不同的结果，有人能解释吗？ 下面是我的示例代码（下面，实际代码当然要长得多），我希望通过将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>

window.onload=函数myFunction（）
{
var x=document.getElementById（'myImg'）.style.width；
var width=window.innerWidth | | document.documentElement.clientWidth；
如果（宽度>=450）{
x=“450px”
}
}

现在，上面的代码产生了与此不同的结果（我不知道为什么…）：

window.onload=函数myFunction（）
{
var x=document.getElementById（'myImg'）.style.width；
var width=window.innerWidth | | document.documentElement.clientWidth；
如果（宽度>=450）{
document.getElementById（'myImg'）.style.width=“450px”
}
}

为变量赋值永远不会更改另一个变量或属性的值（例外情况：全局范围，

与
）

更简单的例子：

var foo = 42;
var bar = foo;

bar = 21;
// foo is still 42

var style = document.getElementById('myImg').style;
// ...
style.width = ...;

在第一种情况下，您仅更改变量
x
的值

在第二种情况下，您正在更改属性
width
的值

JavaScript是，而不是


如果要避免两次查询元素，请将元素或其样式存储在变量中。例如：

var foo = 42;
var bar = foo;

bar = 21;
// foo is still 42

var style = document.getElementById('myImg').style;
// ...
style.width = ...;

当您这样做时：

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

在第二种情况下，您试图修改DOM。在第一个示例中，x包含DOM元素的width属性的值，该属性是一个字符串，因此以后调整它不会影响DOM。在第二个示例中，您正在更改dom元素属性的值，因此它会影响domSo，例如，我希望不同窗口大小具有不同的宽度-使用变量无法做到这一点吗？我必须键入整个文档吗。getElementBy。。。对于每种尺寸？那么，假设我希望不同的窗口尺寸有不同的宽度-没有办法使用变量来实现吗？我必须键入整个文档吗。getElementBy。。。对于每种尺寸？您可以使用：
var x=document.getElementById（'myImg'）
并执行：
x.style.width='450px'
这不太理想（IMO），但谢谢！哦，更好的是，我可以做-var x=document.getElementById（'myImg'）.style，然后做x.width='450px'@user3086182:如果是您认为的方式，那么就更难对代码进行推理了。要了解特定赋值中发生的情况，首先必须追溯变量当前值的来源。