JavaScript Style Property Is Empty

why javascript this.style[property] return an empty string?

The .style property is for getting styles that were placed directly on the element. It doesn't compute styles from your stylesheets.

You may use getComputedStyle() instead:

const myElement = document.getElementById('myId');
const style = getComputedStyle(myElement);
console.log(style.height); // "100px"

Why element.style always return empty in JS?

element.style returns the inline style used in html document and since the style is not set directly in html you will get and empty value

What you are looking for is the computedStyle which will returns the style that is applied to the element

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.

DOM element's style property is an empty string when accessed using JavaScript

The style attribute only gives you information about inline styles.

However, it is not useful for learning about the element's style in
general, since it represents only the CSS declarations set in the
element's inline style attribute, not those that come from style rules
elsewhere, such as style rules in the section, or external
style sheets.

_{Source: MDN HTMLElement.style}

Instead you should use this:

getComputedStyle(foo).display;

demo

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.

JavaScript style property is empty

You can use the window.getComputedStyle for modern browsers

window.getComputedStyle(element).borderBottomWidth;

---

For IE pre-9 you will have to use an alternative

element.currentStyle.borderBottomWidth 

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.

---

Related Topics