Check if element is visible in DOM

dom, html, javascript

Solution

According to this MDN documentation, an element's `offsetParent` property will return `null` whenever it, or any of its parents, is hidden via the display style property. Just make sure that the element isn't fixed. A script to check this, if you have no `position: fixed;` elements on your page, might look like:

// Where el is the DOM element you'd like to test for visibility
function isHidden(el) {
    return (el.offsetParent === null)
}

On the other hand, if you do have position fixed elements that might get caught in this search, you will sadly (and slowly) have to use `window.getComputedStyle()`. The function in that case might be:

// Where el is the DOM element you'd like to test for visibility
function isHidden(el) {
    var style = window.getComputedStyle(el);
    return (style.display === 'none')
}

Option #2 is probably a little more straightforward since it accounts for more edge cases, but I bet its a good deal slower, too, so if you have to repeat this operation many times, best to probably avoid it.

Problem

Is there any way that I can check if an element is visible in pure JS (no jQuery) ? So, given a DOM element, how can I check if it is visible or not? I tried: ``` window.getComputedStyle(my_element)['display']); ``` but it doesn't seem to be working. I wonder which attributes should I check. It comes to my mind: ``` display !== 'none' visibility !== 'hidden' ``` Any others that I might be missing?

Original source

Related problems