28

I wonder if there is any difference in the result when hiding an element with JavaScript attribute or CSS Style.

For example: 

element.setAttribute("hidden", true);

vs

element.style.visibility = "hidden";

I experimented a bit with those two possibilities. My assumption is, that when hiding it with JavaScript, the element is truly hidden and taken out of the flow; and when hiding with CSS Style the element is just not shown but still there.

Mostly this seemed right in my experiments, but sometimes not. So, what is the real difference between those two possibilities?

Jbartmann
  • 1,459
  • 4
  • 24
  • 42

2 Answers2

26

There's two basic methods for hiding an element with CSS:

Firstly, there's visibility: hidden; (or element.style.visibility = "hidden";). This simply makes the item invisible. It still takes up space in the document, it's still part of the flow.

Then there's display: none; (or element.style.display = "none";). This removes the element from the flow of the document entirely. It's still present in the DOM, it's just not rendered to the page.

HTML5's hidden attribute (or element.setAttribute("hidden", true);) is roughly equivalent to display: none;.

In fact, to give older browsers compatibility with the attribute, this is often added to the stylesheet:

[hidden] { display: none; }
Olly Hodgson
  • 15,076
  • 3
  • 40
  • 60
  • 4
    In practice, yes, they will be equivalent. In theory, attribute `hidden` is assigned to an element that should never be shown/read (!) to a user - and `never` here means `in any situations possible`. Quoting the [doc](http://www.w3.org/html/wg/drafts/html/master/single-page.html#the-hidden-attribute), "The hidden attribute must not be used to hide content that could legitimately be shown in another presentation". – raina77ow Dec 11 '13 at 12:00
  • 1
    I know this happened a longggg time ago but I didn't have that same takeaway from reading that doc. The point you addressed above was pointing to a specific tabbed interface scenario, however in the same doc they talk about overriding it via css and "For these reasons, it is generally better to never remove the open attribute manually. Instead, use the close() method to close the dialog, or the hidden attribute to hide it." – Adam Tuliper Jul 16 '20 at 06:10
9

The difference between these two lines of code is that one of them adds an attribute to the element with the given value, while the other sets a property within the style declaration.

For instance:

Let's say that your element variable was a div. When you call

element.setAttribute("hidden", true);

The elements will now look like this:

<div hidden="true"></div>

When you call

element.style.visibility = "hidden";

You will get:

<div style="visibility: hidden;"></div>
MDiesel
  • 2,647
  • 12
  • 14
  • 16
    Don't use `true`, instead use `''` to save 8 bytes of memory. Sorry, I'm a micro-performance freak so I just had to say that. – Jack G Sep 07 '17 at 01:41
  • Wow, I guess you are. Good call-out. I gotta up-vote that. Thanks – MDiesel Sep 07 '17 at 11:39