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

Question

Let's say I have a class ".someClass":

.someClass {
    display: none;
}

Then in javascript code the div is created and then the class is applied for the div:

var myDiv = document.createElement("div");
myDiv.className = "someClass";

Is it possible now to check if "myDiv" has the style "display: none" or not without appending it to the web page?

Or is the only way to test the "display" property is to append "myDiv" to the page, then quickly check "$(myDiv).css('display')" and then remove it from page?

Thank you, really appreciate help.

Try the answer from this post. Hope it works for you. [Get a CSS value from external style sheet with Javascript/jQuery][1] [1]: stackoverflow.com/questions/2707790/… — Umair Hafeez
– Umair Hafeez, Commented Mar 20, 2014 at 12:21

Oscar Paz · Accepted Answer · 2014-03-20 12:50:35Z

3

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.

edited Mar 20, 2014 at 12:50

answered Mar 20, 2014 at 12:17

Oscar Paz

18.3k3 gold badges30 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MrDevel · Accepted Answer · 2014-03-20 12:17:20Z

1

Each element, that is not appended to any DOM element, is considered not visible.

Btw, I'd suggest you to use the following line code to verify if an element is hidden or not.

jQuery(element).is(':visible')

answered Mar 20, 2014 at 12:17

MrDevel

1682 silver badges13 bronze badges

Comments

user2652134 · Accepted Answer · 2014-03-20 12:21:06Z

1

You'll need to create the div. However to prevent any hiccups for the user, try creating a temporary element positioned absolute in the negative index. i.e. left:-9999px top -9999px also preferably opacity 0; just in case the 'someClass' element is also positioned absolute..

Then create/insert the required 'someClass' element in the above element.

answered Mar 20, 2014 at 12:21

user2652134

Comments

Umair Hafeez · Accepted Answer · 2014-03-20 12:24:39Z

0

See the fiddle: http://jsfiddle.net/9SDu5/

var myDiv = document.createElement("div");
myDiv.className = "someClass";
$(myDiv).hide().appendTo("body");
alert($(myDiv).css("display"));
$(myDiv).remove();

answered Mar 20, 2014 at 12:24

Umair Hafeez

4072 silver badges9 bronze badges

2 Comments

Aremyst Over a year ago

I think after you do "$(myDiv).hide(), you forcefully set "display: none" even if it wasn't there. Thanks anyway.

Umair Hafeez Over a year ago

Yes true, I missed this point. Well, did you get to a proper solution?

Aameer · Accepted Answer · 2014-03-20 12:25:47Z

0

var myDiv = document.createElement("div");
myDiv.className = "someClass";
if ($(".someClass").is(":visible") == false) { console.log("yes");}

will result in yes till you even if

myDiv.style.display="block";

so I think adding it to dom is important

answered Mar 20, 2014 at 12:25

Aameer

1,3761 gold badge11 silver badges30 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related