How Can I Check if an Element is Hidden or Visible with JavaScript?
Using JavaScript or jQuery to check if an element is hidden or not sounds very simple. However, there are lot of things that you need can determine the final outcome of such a check. For instance, everyone will have a doing criteria for determine if an element is hidden or visible.
In some projects, an element could be considered hidden only if its display property is set to none. In other projects, the element would be considered hidden if its opacity is set to 0 or its visible property is set to hidden. In this post, we will discuss how to determine the visibility of an element based on all these properties.
There is a :visible selector in jQuery which can be used to determine if an element is hidden or visible. This selector considered an element to be hidden if its display property is set to none, its width and height are explicitly set to 0 or if an ancestor element is hidden so that the considered element is not visible on the page. Form elements type attribute set to hidden are also considered to be hidden.
You should remember that elements with their opacity set to 0 and the visibility property set to hidden will also be considered visible by this selector. Basically, any element which affects the layout of the webpage is considered visible by this selector.
The selector is not part of the CSS specification which means that it cannot take advantage of the performance boost provided by the inbuilt querySelectorAll() method.
Depending on your criteria of visibility, using :visible can be very helpful or overkill in some cases.
Another technique to check if an element is visible or hidden is to compare the value of display property to none. If an element was hidden using the display property, this check would return true. Checking the value of display property is much more faster than using the :visible selector.
JavaScript
if ( $("selector").css('display') == 'none' ){
// Element is hidden
}One major drawback of using this technique is that an element might be hidden because of its parent but this comparison will still return false. Also, it does not take the value of visibility or opacity property in consideration.
You can assign classes to different elements and apply CSS properties inside those classes to hide an element. After that, all you have to do is check if that class has been applied to a particular element. The following example illustrates how it works:
CSS
.no-display {
display: none !important;
}
.no-visibility {
visibility: hidden !important;
}
.no-opacity {
opacity: 0 !important;
}Now you can show or hide any element by adding or removing these classes using .addClass(class-name) and .removeClass(class-name) respectively. To check if an element id visible or hidden, you can simply use .hasClass(class-name).
JavaScript
$("selector").addClass("no-display");
$("selector").removeClass("no-display");
if($("selector").hasClass("no-display")) {
// Element is Hidden
}Some elements might be hidden because of their parents, in such cases you can use the .closest(selector) method to check if any of the ancestors of our element have these classes applied to them. Using the length property on the result of .closest() and checking if it is not equal to zero can tell you if an element is hidden because of its ancestors.
JavaScript
var elem = $("selector");
if(elem.closest("no-display").length > 0) {
// Element in Hidden Because of a Parent
}Quick Summary
Let’s recap everything that we have covered in this tutorial.
- You can use the
:visibleselector in jQuery to check if an element is hidden or visible. This selector considers every element which does not affect the layout of the webpage to be hidden. It also take into account the visibility of ancestor element before determining if the current element is visible. - To know if an element has been hidden using the
displayproperty, you can simply compare the value of display tonone. Using this technique, you will not be able to determine if an element was hidden because of some property applied on its parent. - You can also use classes to determine if an element is hidden or visible. All you have to do is add a class to element to hide it and then remove the class to show it. If you want to check whether an element is hidden, you will just have to look for the right class in it. You will then also be able to use the jQuery
.closest()method to determine if an element is not visible because of its parent.
Let me know if there is anything that you would like me to clarify in this tutorial. Also, you are more than welcome to comment if you know other techniques to check if an element is visible or hidden using jQuery or JavaScript.
Rate this post —
(No Ratings Yet)
Loading...