Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Finding if element is visible (JavaScript )

I have a javascript function that tries to determine whether a div is visible and does various processes with that variable. I am successfully able to swap an elements visibility by changing it's display between none and block; but I cannot store this value...

I have tried getting the elements display attribute value and finding if the the element ID is visible but neither has worked. When I try .getAttribute it always returns null; I am not sure why because I know that id is defined and it has a display attribute.

Here is the code of the two different methods I have tried:

var myvar = $("#mydivID").is(":visible");
var myvar = document.getElementById("mydivID").getAttribute("display");

Any guidance or assistance would be greatly appreciated.

like image 916
Devon Bernard Avatar asked Apr 27 '13 18:04

Devon Bernard


People also ask

How can we check element visibility?

We can do the following to check an element's visibility in the viewport: Get the bounding rect of the DOM element using the getBoundingClientRect . This method returns an object with an element's width, height, and position relative to the viewport.

How do you check if an element is in the viewport?

To find out if the whole element is inside of the viewport we can simply check if the top and left value is bigger or equal to 0, that the right value is less or equal to the viewport height ie window. innerWidth and that the bottom value is less or equal to window. innerHeight.

What is visibility in JavaScript?

This visibility property defines that a particular element is visible on the webpage. Same visibility there is one another property present in the JavaScript called hidden, it will also helps to hide the element but it will not remove the space which is already occupied by element.


1 Answers

If you would like to do this only javascript way you may try

window.getComputedStyle(document.getElementById("mydivID"),null).getPropertyValue('display')
like image 144
Gaurav Avatar answered Sep 19 '22 15:09

Gaurav