0

For example if we have:

<style>
.child {display:none;}
</style>

<script>
$('.parent:contains("Invisible")').addClass('newparent');
</script>

<div class="parent">
   <div class="child">Invisible</div>
</div>

This code works! Parent div will receive new class newparent. This has no logic to me because I always believed if I put display:none that this is it, element is gone. You can't find it in inspect element, view source, etc.

But obviously this is not the case if javascript can find it. That means that this element is rendered somehow. So I'm wondering if element with display:none is still out there is it affecting performance? For example if we have right sidebar and we decide to hide it on mobile with display:none.

From experience I know that the site will load faster if sidebar has display:none, but question is still the same, what happens to the element with display:none, is it rendered somehow, if yes how and where?

Goran
  • 708
  • 7
  • 20
  • 1
    You are mixing data structure with presentation. – John Weisz Jan 26 '16 at 20:23
  • 2
    css cannot change the dom. `display:none` just makes the element not be visible, but it's STILL THERE. just because you can't see it doesn't mean it's invisible to JS - DOM tree operations couldn't care less about the CSS rules applying to element. `visibility: hidden` and `display:none` only affect what's on screen, not what's stored internally. – Marc B Jan 26 '16 at 20:24
  • see the answer here: http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone – Cory Jan 26 '16 at 20:24
  • You must have overlooked the element because it will be discover-able when using the inspector or view-source (unless added to DOM with JS). – hungerstar Jan 26 '16 at 20:26

2 Answers2

4

You seem to have some misconceptions about display:none. It is a css property which causes the element to take up no room on the page. The element is still rendered and still exists all the same.

MDN display

aw04
  • 10,857
  • 10
  • 56
  • 89
1

I always believed if I put display:none that this is it, element is gone. You can't find it in inspect element, view source, etc.

Your assumption is incorrect. The element is still part of the DOM. It's just styled to not be rendered visibly on the screen.

So I'm wondering if element with display:none is still out there is it affecting performance?

No more than any other element would. If you have so many elements as to affect performance, then you'd certainly want to address that. But it has little to do with the styling.

what happens to the element with display:none, is it rendered somehow, if yes how and where?

It's part of the structure of the DOM in memory. Everything about it is still there. It's just not visibly shown in the viewport.

CSS styling doesn't change the structure of the HTML. It just governs how that structure is visibly displayed on the screen. (Or in some other medium.) JavaScript, on the other hand, can be used to modify the DOM in-memory, and those changes are also reflected in the display. (As your test demonstrates.)

David
  • 208,112
  • 36
  • 198
  • 279