Javascript - Difference between img.src="path" and img.setAttribute('src','path')

Question

What’s the difference between setting the path of an image in Javascript using a variable :

img.src="caminho"

And setting the src attribute, for example:

img.setAttribute('src','caminho')

Answer 1

For attributes recognized by the tag something as examples:

• Element.src for tags <img>, <video>, <audio>, <iframe>
• Element.href for tags <a>, <link>

recognise as an attribute, but in a different element whose attribute src or href are not themselves in the specific browser, or in Customelements (if not implemented correctly) set .src or .href (or another that is not valid, what even following the W3 standards may vary in certain browsers) will be set as property and not as an attribute, for example:

var teste = document.getElementById('teste');

teste.src = 'https://stackoverflow.blog/wp-content/themes/stackoverflow-oct-19/assets/svg/dist/logo.svg';

console.log('getAttribute:', teste.getAttribute('src'));

<p id="teste">elemento p</p>

See that getAttribute('src') returned null

Now see when the attribute is existing/valid for a specific element:

var teste = document.getElementById('teste');

teste.src = 'https://stackoverflow.blog/wp-content/themes/stackoverflow-oct-19/assets/svg/dist/logo.svg';

console.log('getAttribute:', teste.getAttribute('src'));

<img src="" id="teste">elemento p</p>

See that getAttribute('src') returned the image address.

That is, to set custom attributes or non-standard attributes the path is setAttribute(), but if the attribute is "valid" in the element you can use what we call shortcuts, such as .src and .href.

For example, change the property of a CSS inline style with setAttribute can be tricky, but with the style property makes it easy enough, in one element:

 <div style="background: #000; color: #fff; font-family: Arial;">

And in CSS do this to change the color to orange:

 Element.style.color = "#fc0";

It will be much simpler than using setAttribute('style', ...)

---

A little history about Internet Explorer

I know it’s a browser that no one else uses, at least not versions older than IE10, unless it’s limited to some situation, but I want to talk about the behavior that IE had, properties and attributes in IE6, 7 and 8 also behaved equally, I mean, by setting a property for an element it became an attribute, even if it was not a valid property there

See the IE8 emulation test:

The code used:

<div id="teste">DIV de teste</div>
<script type="text/javascript">
var teste = document.getElementById('teste');
teste.src = "https://stackoverflow.blog/wp-content/themes/stackoverflow-oct-19/assets/svg/dist/logo.svg";
</script>

Already in IE9+ the behavior was "corrected":