Element.offsetHeight for Visibility

By  on  

One of the (perceived) tricky tasks within front-end coding is checking if an element is visible or not.  The very naive way of checking if an element is visible (i.e. has presence or takes up space on the page) is by checking its display style value:

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

Notice I'm not checking the opacity as well because an invisible element still takes up space on the screen.  The problem with the code above is that you can gain the style of a child but that may not matter if its parent is set to display: none.  For example, if the child's display style value is inline-block, but the element's parent display style is none, the child element is still not visible.  Oddly enough, checking the child element's offsetHeight value will signal if the element is likely visible:

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

If the element is a child of an element which is display: none, the offsetHeight will be 0 and thus you know the element is not visible despite its display value. Again, remember that opacity is not considered and an element which is opacity: 0 is still technically visible, taking up space.

Recent Features

  • By
    5 Ways that CSS and JavaScript Interact That You May Not Know About

    CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but...

  • By
    5 HTML5 APIs You Didn’t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

Incredible Demos

  • By
    MooTools Star Ratings with MooStarRating

    I've said it over and over but I'll say it again:  JavaScript's main role in web applications is to enhance otherwise boring, static functionality provided by the browser.  One perfect example of this is the Javascript/AJAX-powered star rating systems that have become popular over the...

  • By
    Highlighter: A MooTools Search & Highlight Plugin

    Searching within the page is a major browser functionality, but what if we could code a search box in JavaScript that would do the same thing? I set out to do that using MooTools and ended up with a pretty decent solution. The MooTools JavaScript Class The...

Discussion

  1. René

    Unfortunately there are a lot of caveats to this.
    First of all, it’s not just opacity that will render an element invisible but still taking up space.(filters and visibility:hidden)

    Another that comes to mind right away is checking elements that have no padding or border and have just floating/absolute/fixed children.

    Also, in some cases you could set an element’s height to 0 and having overflowing children (don’t have a use case popping up though)

    Solution; somebody else probably figured that out. My first guess would be either setting height to 1px for the test or bubbling up and use the display none check..

  2. Fabrizio

    What about checking for El.clientwidth === 0

  3. Fabrizio

    and are there other way to check is an element is visible without triggering a reflow/repaint?

  4. Christoph

    The best bet seems to me to check Element.offsetParent. If it returns null, the element is not visible.

  5. Javier

    What about SVG elements? They don’t have offsetHeight property, but they can be set to display:none;

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!