What is the best way to test an element in the DOM

Question

There are several ways to do this (which I know).

Testing css mapping

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

Check visibility

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

In visibility I can check if the element exists.

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

Elements with visibility: hidden or opaque: 0 are considered visible because they still consume space in the layout.

A source

But, please note that in both cases I can not check the visibility (by the user), because:

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

visibility: hidden hides the element, but it will still be as before. The item will be hidden, but will still affect the layout.

display: none hides an element and it does not take up space. the element will be hidden, and the page will appear as if the element was not:

A source

Therefore, I do not check in any of the examples whether the element is visible in all senses to the user.

So my question is:

• What are the differences between the two codes above?
• What is the best way to check if an item is visible to the user:

Should I 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 as shown below and check / improve as new things come about,

 $.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, as we use the jQuery .css function (specifically for opacity).

Demo

Answer 2

The difference between the two is that hiding using the "visible" attribute leaves the element on the page, rather than actually displaying. Thus, this distance will be taken into account when the page displays the rest of the screen.

It seems like this does another way, it actually stops the element that is placed on the page, which can change the way other elements are placed on the page.

Usually testing the visible part is enough from my experience, but if you want to be more complete, then yes, you will need to check using "& &". conditions for multiple attributes. In fact, it all depends on how clean the code you use is and how well the other aspects of the system user interface are tested.

Another goal to consider is the goal of the test. Are you testing the code you wrote, or how does the browser use Javascript to render the page? You want to test the generated code and rely on the browser working (because if the browser stops working, then all this is unreliable). Therefore, if your code tells the element to set some attribute, checking this attribute is all you need to do. Everything that can actually be really proved is tested outside the code itself (as with manual page viewing, etc.).

Answer 3

If you want to see if an element exists in the DOM, you can simply do this:

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

Using:

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