DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets has posted 5883 posts at DZone. View Full User Profile

JavaScript Function Checks For DOM Element Visibility

  • submit to reddit
        Determines if a given element is visible, by checking a variety of things. Will work for CSS or inline style declarations of visible:hidden or display: none. Will check if it's inside of an invisible element, as well.

function isVisible(obj)
    if (obj == document) return true
    if (!obj) return false
    if (!obj.parentNode) return false
    if ( {
        if ( == 'none') return false
        if ( == 'hidden') return false
    //Try the computed style in a standard way
    if (window.getComputedStyle) {
        var style = window.getComputedStyle(obj, "")
        if (style.display == 'none') return false
        if (style.visibility == 'hidden') return false
    //Or get the computed style using IE's silly proprietary way
    var style = obj.currentStyle
    if (style) {
        if (style['display'] == 'none') return false
        if (style['visibility'] == 'hidden') return false
    return isVisible(obj.parentNode)


Snippets Manager replied on Thu, 2009/10/08 - 1:38am

What about this way: function isVisible(obj) { var cnode = obj try{ while(cnode){ if(cnode.nodeName){ if(cnode.nodeName.toLowerCase()=="body"){ return true; } } if("none" ||"hidden"){ return false; } cnode = cnode.parentNode; } return true; }catch(ex){ return false; } }