Why element.style always return empty in JS?

Question

When you define display:block in css, element.style.display is returning always empty.

console.log(document.getElementById('test').style.display)

#map {display: block;}

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

But if you set style in that element, then we can get the style.display details.

    console.log(document.getElementById('test').style.display)

 <div style="display:none" id="test">test</div>

I don't want the solutions because I know SO having lot of solutions for it :

getElementById().style.display does not work

Show/Hide google maps api does not work fine

My question is different.

Inline style is not a good way of coding. So we always assign the style in CSS. But why it's showing empty while provide style property in CSS instead of via the element? Is JavaScript particularly can't read the css style property?

you can check below, all the style properties are empty even I am providing display: block; align-content:center;. Why?

console.log(document.getElementById('test').style)

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

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

That's how it works. From the MDN docs: The HTMLElement.style property is used to get as well as set the inline style of an element. While getting, it returns a CSSStyleDeclaration object that contains a list of all styles properties for that element with values assigned for the attributes that are defined in the element's inline style attribute. — Shilly, Jun 01 '18 at 14:05
So the key point is Inline style only inside the element.style property. If you need to detect display: block or other css properties, make a class for those and just check the classList. — Shilly, Jun 01 '18 at 14:06
@Shilly I know the solutions. I just want to know why Javascript does not handle this. — Ramesh Rajendran, Jun 01 '18 at 14:09
What do you mean? There is no direct relation between JS and CSS. JS just has access to the DOM interface of a browser page. And the DOM has access to the attributes of DOM nodes, style being one of them. If you need access to the CSS styles defined in an external file, you have to use the `document.styleSheets` property instead of a specific elements properties. — Shilly, Jun 01 '18 at 14:10
@Shilly When you rendered the div tag, you can see on inspect window . the div tag style property having those CSS details. But why it does not appearing in Javascript side — Ramesh Rajendran, Jun 01 '18 at 14:11
You can also use `window.getComputedStyle()` to get all applied styles of a specific element. But as you see it's a window method, not an element method. — Shilly, Jun 01 '18 at 14:13
@Shilly That's the reason what i want? Why element methods are does not providing this options? Is it predefined in JS? — Ramesh Rajendran, Jun 01 '18 at 14:14
No idea. I assume it's part of the DOM interface. JS is a year older than CSS. So when JS was created, people used inline attributes on HTML nodes to define styles instead of stylesheets. Why an easier interface for CSS interaction was omitted from the first DOM implementations, is something you'll have to ask the DOM and CSS Working groups of W3C. — Shilly, Jun 01 '18 at 14:17

score 25 · Accepted Answer · answered Jun 01 '18 at 14:12

25

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>

answered Jun 01 '18 at 14:12

Chiller

9,520
2
28
38

1

How can i modify css properties defined in seperate css files dynamically in js – Hash Dec 04 '18 at 14:06

Guillaume Georges · Answer 2 · 2018-06-01T14:45:39.253

The HTMLElement.style property is used to get as well as set the inline style of an element. While getting, it returns a CSSStyleDeclaration object that contains a list of all styles properties for that element with values assigned for the attributes that are defined in the element's inline style attribute.

HTMLElement.style

console.log(document.getElementById('test').style.display)

#map {
      display: block;
    }

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

In this above snippet, your HTML element doesn't have a style attribute. So, your JavaScript object's style property doesn't contain a display property either. So, console.log(document.getElementById('test').style.display) doesn't print anything.

    console.log(document.getElementById('test').style.display)

 <div style="display:none" id="test">test</div>

In the above snippet, your HTML element has a style attribute with "display". So your JavaScript object contains a style property that contains a display property. That's why console.log(document.getElementById('test').style.display) prints 'none'

The DOM API provides a way to manipulate HTML element as JavaScript objects. Your HTML elements may have classes defined in their class attribute that grant them CSS properties, but your JavaScript object only contains the class names in its className property. The DOM API doesn't parse the CSS to update the JavaScript HTMLElements.

Why element.style always return empty in JS?

2 Answers2

Linked

Related