How to Retrieve the Display Property of a Dom Element

How to retrieve the display property of a DOM element?

The .style.* properties map directly onto the style attribute, not to the applied style. For that you want getComputedStyle.

I'd give serious consideration to toggling .className and separating the presentation from the logic entirely.

Get the display property value of an element

The value isn't set as "hidden" isn't a valid value. Try:

trs[1].style.display = "none";
console.log(trs[1].style.getPropertyValue('display'));

Retrieve display property using javascript and getElementsByClassName

I have a working example for what you want to achieve.
Getting a computed property in a cross browser way is a bit of a pain in the back, if you don't use libraries. So, I think it may be better to set the display:none in the javascript.

Here is my code

for (var i = document.getElementsByClassName('collapse_body').length - 1; i >= 0; i--) {
    document.getElementsByClassName('collapse_body')[i].style.display = "none";
};
var l = document.getElementsByClassName('collapse_header');
var toggle = function()
{
    cb = this.parentNode.getElementsByClassName('collapse_body')[0];
    cb.style.display = ((cb.style.display == "none") ? "block" : "none");

}
for (var i = l.length - 1; i >= 0; i--) {
    l[i].addEventListener('click', toggle, false);
};

Basically you set the display property of all of your collapse_body elements to none, then attach to every collapse_header an event that toggle the display property of his sibling collapse_body.

Here is a working example

Also please note that getElementsByClassName() returns an array of elements, which you can map or select an element from as you would do with a normal array.

I set the display property of an HTML element in CSS. But, if I check that value in javascript it shows blank

Instead of using

el.style.display

Use

getComputedStyle(el).display

more info

Check element CSS display with JavaScript

As sdleihssirhc says below, if the element's display is being inherited or being specified by a CSS rule, you'll need to get its computed style:

return window.getComputedStyle(element, null).display;

Elements have a style property that will tell you what you want, if the style was declared inline or with JavaScript:

console.log(document.getElementById('someIDThatExists').style.display);

will give you a string value.

Javascript/Jquery: get 'display' css style for DOM element that wasn't appended to web page

You can't check for that property until you add the element to the page. CSS rules belong to he document, and are, in many cases, dependent on where in the DOM tree the element is. Until the element is added, CSS properties are not filled.

You can test it in the chrome console:

var div = document.createElement('div');
getComputedStyle(div);

You'll get an object with all CSS properties applied to the DIV, and you'll see that they are all empty.

Now, if you do:

document.body.appendChild(div);
getComputedStyle(div);

You'll see that they are now filled. This also happens when an element is removed from the DOM, not just when it hasn't been appended.

Revert `display: none` on elements to original value

use: element.style.display = "" to reset style.display of an element

(() => {  const displayState = reset =>     Array.from(document.querySelectorAll("div"))      .forEach( el => el.style.display = reset ? "" : "none" );    //                                           ^ restore original display state  document.querySelector("#showAll").addEventListener("click", () => displayState(true));  document.querySelector("#hideAll").addEventListener("click", () => displayState());})();

#first, #second, #third {  display: inline-block;  margin-right: 1em;}

<div id="first">[First]</div><div id="second">[Second]</div><div id="third">[Third]</div><button id="showAll">show divs</button><button id="hideAll">hide divs</button>

function getDisplayType (element) {
    var cStyle = element.currentStyle || window.getComputedStyle(element, ""); 
    return cStyle.display;
}

function getElementDefaultDisplay(tag) {
    var cStyle,
        t = document.createElement(tag),
        gcs = "getComputedStyle" in window;

    document.body.appendChild(t);
    cStyle = (gcs ? window.getComputedStyle(t, "") : t.currentStyle).display; 
    document.body.removeChild(t);

    return cStyle;
}