hidden global attribute
The most unknown global attribute.
You are doing it wrong!
Here are the wrong methods, so you don't use them ever again:
- changing the
classNameproperty of an element (i.e.
obj.className = 'hidden';)
- manipulating the
classListobject of an element (i.e.
- manipulating the
styleobject of an element (i.e.
obj.style.display = 'none';)
Why is it wrong?
classNameproperty 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
classListobject of an element is equaly as bad as the above.
styleobject 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
block, or something else?
So, is there a better solution?
hidden attribute to the rescue!
hidden attribute is global. Any element can use it. Even the
<html> element (check the source code!)
hiddenglobal 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
hiddenattribute 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.