If I provide a display:none; property to a particular div.
So, My Question is that is that div load when a page loads?
Asked
Active
Viewed 2,796 times
1
War10ck
- 12,387
- 7
- 41
- 54
Jam Eel Ahmed
- 79
- 1
- 10
-
loads as in? will the css be downloaded? then yes. will the element will be present as div taking space? then no. If you want the element to be invisible and still take its place, use visible instead of display. – Abhinav Gauniyal Dec 16 '16 at 15:51
-
Yes it does. The div will be there but it won't take any space and other things. – Patrick Mlr Dec 16 '16 at 15:51
-
Yes, because the html is fully loaded and then the css applies on to it. – Saurav Rastogi Dec 16 '16 at 15:52
-
yes that div load. But why you asking this question here? simple google search can give you tons of results. – Baezid Mostafa Dec 16 '16 at 15:53
-
You should accept an answer to your question if you ever see this :) – Obed Parlapiano May 07 '19 at 18:39
5 Answers
4
Short answer: yeah, it loads.
Longer, better answer: Yeah, all elements that are in the HTML file will load and be part of the DOM, which means that they can then be targeted using JavaScript, displayed or not. If you add any element with display: none, the element will be loaded on the page but the display: none property will tell the browser to hide it (users can't interact with it at all). You can then show it, or do whatever you want with it.
According to MDN display: none will:
Turns off the display of an element (it has no effect on layout); all descendant elements also have their display turned off. The document is rendered as though the element did not exist.
To render an element box's dimensions, yet have its contents be invisible, see the visibility property.
The advantage of this is that you can, for example, add an overlay that will show only when the user clicks on a button. Then you add some JavaScript function so that when the user clicks on it, the overlay will show. Magic!
You can see this exact functionality here
Obed Parlapiano
- 3,226
- 3
- 21
- 39
2
<div style="display:none">
<p>
This div has display: none.
</p>
</div>
<div>
<p>
This div has default display property.
</p>
</div>
A simple experiment would show you that the div will be rendered in the page but just hidden to the reader.
Press F12 to open up the console, and you can find the div with display: none shown in your DOM.
Alic
- 638
- 6
- 27
-
2Just a heads-up, there is no such thing as `display: auto` - most elements default to `inline` or `block`. The real "initial value" as per CSS Spec is `inline`. You could also use `initial`. – Brett Bender Dec 16 '16 at 16:28
-
1
2
The element will be loaded, but will not affect the DOM.
Jacob Price
- 71
- 1
- 5
-
1To clarify, it will affect the DOM in the sense that the element is part of it, but won't affect it *visually*. – Obed Parlapiano Dec 16 '16 at 16:38
-
0
Well, the web consortium says that
display: none;
value causes an element to not appear in the document. It has no effect on layout.
Trusted Source: www.w3.org/wiki/CSS/Properties/display
What does it mean? It's a bit tricky. Is it still in the document but does not appear there, or is it not there at all?
When you use visibility: hidden; for example, the element just becomes invisible, but the space which it takes, still is taken. On the contrary, display: none; 'dissapears' from the page, it doesn't take space, it's gone...
But the element is still accessible through the DOM. Setting display to none makes sure that the box-model is not generated at all. The same is valid for all the element descendants.
Petya Naumova
- 727
- 2
- 11
- 23
