Detect if element is hidden from user because of parent hidden attribute

Question

In pure javascript/DOM is there a way to know if an element is hidden? As in I have something like this:

    <div id="creator" hiddden="hidden">
      <dl>
        <dt> <label for="creator">Creator:</label> </dt>
        <dd>
           <input type="text" name="creator"/>
        </dd>
      </dl>
    </div>

So from acquiring the form element only, is it possible to find if its hidden because an ancestor has a hidden attribute?

Many thanks

Try valid markup, and we'll try to help. Tip : computedStyle ? — adeneo, Apr 17 '14 at 18:50
First of all it should be `hidden`, suppose it is a typo, isn't it ?! — nanobash, Apr 17 '14 at 18:51
check http://stackoverflow.com/questions/19669786/check-if-element-is-visible-in-dom — HamidRaza, Apr 17 '14 at 18:58

score 1 · Accepted Answer · answered Apr 17 '14 at 18:56

Look how jQuery does it:

jQuery.expr.filters.hidden = function( elem ) {
    // Support: Opera <= 12.12
    // Opera reports offsetWidths and offsetHeights less than zero on some elements
    return elem.offsetWidth <= 0 && elem.offsetHeight <= 0;
};

Demo: http://jsfiddle.net/xJ2Dr/

score -1 · Answer 2 · answered Dec 18 '19 at 12:42

-1

Element.offsetParent==null

then element is hidden

answered Dec 18 '19 at 12:42

Abhijit Poojari

125
1
7

Detect if element is hidden from user because of parent hidden attribute

2 Answers2