Why JavaScript This.Style[Property] Return an Empty String

console.log(window.getComputedStyle(document.getElementById('test')).display)

#map {      display: block;      align-content:center;    }

<div id="test">test</div>

Javascript shows empty style property for document objects that I have styled using the css

This is because element.style returns the inline CSS style for the element, and not the computed style based on CSS stylesheets.

To get the computed style, use window.getComputedStyle(element).

More information here:

• https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
• why javascript this.style[property] return an empty string?

why element.style.backgroundColor property gives an empty string as a result?

.style contains only inline styles (set via that property, or the HTML attribute with the same name). It's not affected by style sheets at all. getComputedStyle gets you the current effective value for that property, regardless of where it came from.

The JavaScript style class return empty string

The .style object only includes style properties directly set on the DOM element. Properties determined from CSS are not visible that way.

style.backgroundColor is an empty string in JavaScript

Unless you have directly defined the backgroundColor on the element itself, you have to use getComputedStyle() or currentStyle to get the value of a style property.

A method that is compatible with multiple browsers would look like this:

function getStyle(el,styleProp)
{
    if (el.currentStyle)
        return el.currentStyle[styleProp];

    return document.defaultView.getComputedStyle(el,null)[styleProp];
}

You can see a working example on jsFiddle.

More information:

• See this page for more information about getComputedStyle().
• See this page for more information about currentStyle (IE).
• See this page for more information about browser compatibility issues.

Why browser is returning empty string on style.height ? How to get actual height of an element?

When you use this.style.height, the height must have been specified on the element first, like this:

<div style="height: 15px;" onclick="alert(this.style.height)">sometext</div>

Otherwise, you should probably use offsetHeight or clientHeight:

<div onclick="alert(this.offsetHeight)">sometext</div>

Why are all of my DOM element properties coming back as empty strings?

You can use getComputedStyle and getPropertyValue. element.style will refer to the style attribute on the element (inline styles), and your CSS isn't inline.

window.addEventListener("load", function(){   var element = document.getElementsByClassName("js-child")[0];   var rightPosition = window.getComputedStyle(element).getPropertyValue('right');  console.log(rightPosition)});

.parent {   position: relative;}
.child {   position: absolute;   right: -220px;   top: 0;   transition: all 0.5s ease;}

<div class="parent">   <div class="child js-child">   </div></div>