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

Question

it seems odd to me that using document.getElementById('myImg').style.width instead of var x = document.getElementById('myImg').style.width yields different results can anyone explain please? here's my example code (below, the real code is much longer of course), I'm looking to reduce it as much as I can by storing document.getElementById('myImg').style.width as a variable but upon loading the page it seems to work counter-intuitively...

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

Now the above code produces different results than this (and I have no idea why...):

<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

When you do :

var x = document.getElementById('myImg').style.width;
var width = window.innerWidth || document.documentElement.clientWidth;
if(width >= 450){
  x = "450px"
}

you in fact first assign the width of your element to the variable x, then you overwrite x with the value "450px", but you don't change the element.

In the second example, document.getElementById('myImg').style.width = "450px" actually sets the width of the element, but doesn't change the variable x.

To simplify your code, you can use :

var x = document.getElementById('myImg');
var width = window.innerWidth || document.documentElement.clientWidth;
if(width >= 450){
  x.style.width = "450px"
}

Answer 2

Assigning a value to a variable never changes the value of another variable or property (exceptions: global scope, with ).

Simpler example:

var foo = 42;
var bar = foo;

bar = 21;
// foo is still 42

In the first case, you are only changing the value of variable x .
In the second case you are changing the value of the property width .

JavaScript is pass-by-value , not pass-by-reference .

---

If you want to avoid querying for the element twice, either store the element or its style in a variable. For example:

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