What's the best way to test an element in the DOM

Question

There are a couple of ways I could do this (That I'm aware of).

Test css display

if ($('#foo').css('display') == 'none')

Test the visibility

if ($('#foo').is(':visible'))

In the visibility I can check if the element is there.

Elements are considered visible if they consume space in the document. Visible elements have a width or height that is greater than zero.

Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout.

Source

But, note that in both I can't test the visibility (by the user) because:

Hiding an element can be done by setting the display property to "none" or the visibility property to "hidden". However, notice that these two methods produce different results:

visibility: hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.

display: none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there:

Source

So in neither of the examples I test if the element is visible in all senses for the user.

So my question is:

• What're the differences between the two if's codes from above?
• What's the best way to test if an element is visible to the user:

Should I have to use something like:

if ($('#foo').is(':visible') && 
    $('#foo').css('opacity') > 0 && 
    $('#foo').css('visibility') != 'hidden')

Answer 1

I think your best bet is to implement a custom function like below and test/improve as new things come up,

$.fn.isReallyVisible = function () { //rename function name as you like..
    return (this.css('display') != 'none' &&
            this.css('visibility') != 'hidden' &&
            this.css('opacity') > 0);
}

The above should be cross browser proof as we are using jQuery .css function (specifically for opacity).

DEMO

Answer 2

The difference between the two is that being hidden using "visible" attribute leaves the element on the page, just not actually displayed. So, it's spacing will be taken into account when the page renders the rest of the display.

It seems that doing it the other way actually stops the element from being put onto the page, which can change how other elements on the page are laid out.

usually testing the visible part is enough from my experience, but if you are wanting to be more complete, then yeah you would have to check using "&&" conditions on multiple attributes. It really all depends on how clean the code you are using is, and how well tested the rest of the UI aspect of the system is.

The other thing to consider is what is the purpose of the test. Are you testing code that you wrote, or how the browser is using Javascript to render the page? You want to be testing the code that you are creating, and rely on the fact that the browser works (because if the browser stops working, then the whole thing is unreliable anyway). So if your code tells the element to set some attribute, then checking for that attribute is all the testing you need to do. Anything on top of that can only really be proven by testing outside of the code itself (as in manualy looking at the page and other things like that).

Answer 3

If you want to see if an element exists in the DOM you could just do this:

$.fn.exists = function () {
    return this.length > 0;
}

Usage:

$('#myid').exists();