Javascript Style How to - Detect if element is hidden from user because of parent hidden attribute

Question

We would like to know how to detect if element is hidden from user because of parent hidden attribute.

Answer


<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>
window.onload=function(){<!--from   ww  w .  j a  v a  2  s.c  om-->
    function isHidden(elem) {
        return elem.offsetWidth <= 0 && elem.offsetHeight <= 0;    
    }
    foo = document.getElementById("foo")
    console.log(isHidden(foo))
}
</script>
</head>
<body>
  <div style="display: none">
    <div id="foo" style="width: 100px; height: 100px">hi</div>
  </div>
</body>
</html>

The code above is rendered as follows: