Understanding HTMLElement.hidden

Question

MDN says:

This is quite different from using the CSS property display to control the visibility of an element.

I do notice though when I make an element hidden it gets display: none;.

In what ways is .hidden = true different to setting display: none;?

@RayeesAC How does this answer my question? – tonitone120 Sep 23 '20 at 18:20 — tonitone120, Sep 23 '20 at 18:20

score 2 · Answer 1 · answered Sep 23 '20 at 18:28

One is HTML, the other is CSS. HTML is for semantics, whereas CSS is for styling. Some HTML elements and properties happen to come with default styles, depending on the user agent.

So it's like the difference between <strong> (which is shown bold by default in most user agents) and <span style="font-weight: bold">.

score -3 · Answer 2 · edited Sep 24 '20 at 08:48

-3

Ultimately, what it boils down to is:

display:none completely hides the element from the page. It isn't rendered. You can still interact with it through the DOM, but there is no space allocated for it and it doesn't affect any other elements on the page visually.

visibility:hidden only hides the element but the space remains. It affects other elements on the page. You can't see it but you can see its space

edited Sep 24 '20 at 08:48

E_net4

27,810
13
101
139

answered Sep 23 '20 at 18:32

QT Ray

1,256
8
12

It’s being downvoted because you answered the difference between `display: none` and `visibility: hidden` when the question was about the difference between `display: none` and the `hidden` HTML attribute. – Ry- Sep 23 '20 at 22:55

Understanding HTMLElement.hidden

2 Answers2