Hi I wanted to know what the effect of applying display:none to an element is. Does it remove it from the DOM or just from the document flow? What does removing an element from the document flow implies? I know that visibility: hidden just hides the element, but it still affects the document flow and that you can remove an element from the DOM using the remove() js method.
CSS `display:none` effect on DOM
Viewed 1212
2 Answers
Using display:none; will make the element disappear, like it has never been there, visibility: hidden; will hide it only, making it kinda transparent and it will disturb document flow
display: none; will just hide the element, but all the listener events will still be there. It won't be removed from the DOM.
But the difference between visibility: hidden and display: none is that, in first case, the tag and content inside will be rendered, whereas in second case the tag won't be rendered.
visibility: hidden;
div tag is rendered and affecting document flow
display: none;
div not rendered
Related