⚠ Warning: Cascading Style Sheets↗ support is disabled in your browser. Please enable CSS for a better experience on this website.


HTML

🗣 Translations

hidden global attribute

The most unknown global attribute.

You are doing it wrong!

Have you ever hidden something with JavaScript in your HTML document and used CSS to do it? You are doing it wrong! Just like a gazillion other websites↗, but it's not your fault, you have been misinformed. Even W3Schools is doing it wrong↗.

Here are the wrong methods, so you don't use them ever again:

  1. changing the className property of an element (i.e. obj.className = 'hidden';)
  2. manipulating the classList object of an element (i.e. obj.classList.add('hidden');)
  3. manipulating the style object of an element (i.e. obj.style.display = 'none';)

Why is it wrong?

  1. Changing the className property of an element requires CSS to be enabled in the user's browsers, which is not guaranteed. It's just hidden from the screen, it's still present and active in the model (see MVC↗). For example, did that piece of CSS also apply to other medium like print and aural?

  2. Manipulating the classList object of an element is equaly as bad as the above.

  3. Manipulating the style object of an element is just a little bit better in the sense that it applies to all medium. Otherwise, it's still as much wrong. If CSS is disabled, the hidden element still appears. Now you want to display that element again ; was it inline, block, or something else?

So, is there a better solution?

hidden attribute to the rescue!

The hidden attribute is global. Any element can use it. Even the <html> element (check the source code!)

The hidden global attribute is a Boolean attribute indicating that the element is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. Browsers won't render elements with the hidden attribute set.

The hidden attribute must not be used to hide content that could legitimately be shown in another presentation. For example, it is incorrect to use hidden to hide panels in a tabbed dialog, because the tabbed interface is merely a kind of overflow presentation — one could equally well just show all the form controls in one big page with a scrollbar. It is similarly incorrect to use this attribute to hide content just from one presentation — if something is marked hidden, it is hidden from all presentations, including, for instance, screen readers.

Isn't it nice? obj.hidden = true; is all you need.