Why does element.style.display is blank if display declared on CSS [duplicate]

Question

Why does this JS return blank if the style is declared in CSS, and works good when declared inline?

//html
<img id="myImg" src="http://jsfiddle.net/favicon.png" />
<img id="myImg2" src="http://jsfiddle.net/favicon.png" style="display:none;" />

/css
#myImg {
    display:none;
}

//vanilla JS
var el = document.getElementById('myImg');
var el2 = document.getElementById('myImg2');
console.log(el.style.display); // blank
console.log(el2.style.display); // 'none' - as expected

Fiddle here

Answer 1

The style property maps onto the HTML style attribute, not the cascaded or computed style.

Use getComputedStyle if you want to get that.