Method 1: Checking the height, width and bounding rectangle of the element: The element can be checked whether it is visible by checking the height, width, and dimensions of the bounding rectangle of the element.
The offsetHeight property is used to get the height of an element including the vertical padding and borders if present. It will return an integer with the height in pixels.
Similarly, the offsetWidth property is used to get the width of an element including the horizontal padding and borders if present. It will return an integer with the width in pixels.
The getClientRects() is used to get the collection of bounding rectangle of the element. It returns a list of DOMRect object. The length property of this list can be used to verify whether the list has any rectangle object. If the length returned is 0, it means that no rectangle objects were found.
The combination of all these three results are taken together to test whether the element is visible. If it returns true value then the object is visible and the false value signifies that the object is invisible.
Method 2: Using getComputedStyle() mETHOD: The getComputedStyle() method is used to return an object that contains all the CSS properties of the element. Each of these properties can now be checked for any property required.
The display property is used to specify the display behavior of an element. The ‘none’ value of this property completely hides the element from the page. This property is checked with the ‘none’ value in the style object returned. A true return value means that the object is invisible and The false value signifies that the object is visible.
Please Login to comment...