Advanced Search

JavaScript DOM Element Visibility Checker

/ Published in: JavaScript
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. function isVisible(obj)
  2. {
  3.     if (obj == document) return true
  4.  
  5.     if (!obj) return false
  6.     if (!obj.parentNode) return false
  7.     if (obj.style) {
  8.         if (obj.style.display == 'none') return false
  9.         if (obj.style.visibility == 'hidden') return false
  10.     }
  11.  
  12.     //Try the computed style in a standard way
  13.     if (window.getComputedStyle) {
  14.         var style = window.getComputedStyle(obj, "")
  15.         if (style.display == 'none') return false
  16.         if (style.visibility == 'hidden') return false
  17.     }
  18.  
  19.     //Or get the computed style using IE's silly proprietary way
  20.     var style = obj.currentStyle
  21.     if (style) {
  22.         if (style['display'] == 'none') return false
  23.         if (style['visibility'] == 'hidden') return false
  24.     }
  25.  
  26.     return isVisible(obj.parentNode)
  27. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.