Check if element is visible which parent is hidden in DOM

Question

The CSS:

#test {
        visibility: hidden;
        width: 400px;
        height: 400px;
        background-color: orange;
    }
    #subTest {
        width: 100px;
        height: 100px;
        background-color: gray;
    }

The HTML:

<div id="test">
    <div id="subTest"></div>
</div>

The JavaScript:

$(function() {
    var test = document.getElementById('test'),
        subTest = document.getElementById('subTest');

    console.log("getClientRects,length = " + subTest.getClientRects().length);
    console.log("offsetParent = " + subTest.offsetParent);
    console.log("JQuery isVisible = " + $("#subTest").is(":visible"));
});

The Result:

getClientRects,length = 1

offsetParent = [object HTMLBodyElement]

JQuery isVisible = true

It seems that all methods are ineffective.

So how to check if the #subTest is visible ?

If parent is `hidden`, there is no way child will be visible.. — Rayon, Mar 25 '16 at 08:34
[Jquery - How to check, if child in hidden DIV is visible?](http://stackoverflow.com/questions/4087039/jquery-how-to-check-if-child-in-hidden-div-is-visible) — Marvin, Mar 25 '16 at 08:45

score 0 · Answer 1 · answered Mar 25 '16 at 09:14

0

this

$('#subTest').css('visibility') == 'hidden' // true

As the parent is hidden which will cascade to the child.

answered Mar 25 '16 at 09:14

BenG

14,826
5
45
60

score -1 · Answer 2 · answered Mar 25 '16 at 08:49

I don't think it's possible. They're called cascading style sheets for a reason. There is a semantic between a parent and child elements.

However as a work around you could clone it and show the clone. Not sure why you'd want to. I think it is more likely you need to change your markup so that the markup fits the use case more effectively.

However since I mentioned it. Here it is...

CODE:

var someElement = jQuery('#subDiv').clone();
someElement.appendTo('someOtherElement');

Hope this helps,

Tim

Check if element is visible which parent is hidden in DOM

2 Answers2