Question

对我来说，使用 document.getElementById（＆＃39; myImg＆＃39;）。style.width 而不是 var x = document.getElementById（＆＃39; myImg＆＃39;）。style.width 会产生不同的结果，任何人都可以解释一下吗？这是我的示例代码（下面，真正的代码当然要长得多），我希望通过存储document.getElementById（＆＃39; myImg＆＃39;）来尽可能地减少它。 .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，然后用值＆＃34; 450px＆＃34;覆盖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"
}

Answer 2

为变量从不赋值会更改另一个变量或属性的值（例外：全局范围，with）。

更简单的例子：

var foo = 42;
var bar = foo;

bar = 21;
// foo is still 42

在第一种情况下，您只是更改变量x的值在第二种情况下，您要更改属性width的值。

JavaScript是pass-by-value，而不是pass-by-reference。

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

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

Javascript getElementById（'id'）。style VS var x

2 个答案: