JavaScript 通过 offsetHeight 属性检测元素是否显示

Question

一直都有一个困惑，JavaScript 代码编程是如何检测一个元素是否显示的，很天真的检测方式是如果元素是显示的（在网页中已存在或是占用了空间），通过检测这个元素的 CSS 样式值 display。

var incorrectIsVisible = window.getComputedStyle(someElement, null).getPropertyValue('display'); // "inline", "inline-block", "block", etc.

注意，我不是检测他的透明度，因为在网页中，透明度为 0 即看不见的元素仍然占用了网页的空间，上面代码的问题是，你可以获取一个子元素的 CSS 样式，但是这可能不是其父元素的属性 display: none，例如如果子元素的 display 设置为 inline-block，但是父元素设置 display 为 none，那么他的子元素任然不会显示出来，奇怪的是检测子元素的 offsetheight 属性的值却不是 0，如果他没有设置 display 为 none 的话。

var correctIsVisible = someElement.offsetHeight; // 0 for hidden, more than 0 for displaying

如果一个元素是另一个元素的子元素，他设置 display 为 none，那么他的 offsetheight 属性值就是 0，但是请记住，这里没有讨论透明度元素的显示问题，因为从技术上来说，即使设置透明度为 0，他任然会占用网页的空间。