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.


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.