If I provide a display:none; property to a particular div.
So, My Question is that is that div load when a page loads?
-
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 GauniyalCommented Dec 16, 2016 at 15:51
-
Yes it does. The div will be there but it won't take any space and other things.– Patrick MlrCommented Dec 16, 2016 at 15:51
-
Yes, because the html is fully loaded and then the css applies on to it.– Saurav RastogiCommented Dec 16, 2016 at 15:52
-
yes that div load. But why you asking this question here? simple google search can give you tons of results.– Baezid MostafaCommented Dec 16, 2016 at 15:53
-
You should accept an answer to your question if you ever see this :)– Obed ParlapianoCommented May 7, 2019 at 18:39
Add a comment
|
5 Answers
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
answered Dec 16, 2016 at 15:56
The element will be loaded, but will not affect the DOM.
-
1To clarify, it will affect the DOM in the sense that the element is part of it, but won't affect it visually. Commented Dec 16, 2016 at 16:38
-
<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.
-
2Just a heads-up, there is no such thing as
display: auto- most elements default toinlineorblock. The real "initial value" as per CSS Spec isinline. You could also useinitial. Commented Dec 16, 2016 at 16:28 -
1Oop, must be thinking something else. Will change it. Thanks!– AlicCommented Dec 16, 2016 at 16:29
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.
answered Dec 16, 2016 at 16:56
Yes absolutely div loads on page but doesn't show or acquire space.
