检查元素是否可见在DOM中隐藏哪个父元素

时间:2016-03-25 08:32:45

标签: javascript jquery html css

CSS:

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

HTML:

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

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"));
});

结果:

getClientRects,length = 1

offsetParent = [object HTMLBodyElement]

JQuery isVisible = true

似乎所有方法都无效。

那么如何检查#subTest是否可见?

2 个答案:

答案 0 :(得分:0)

我不认为这是可能的。出于某种原因,它们被称为级联样式表。父元素和子元素之间存在语义。

然而,作为解决方法,您可以克隆它并显示克隆。不知道为什么你想要。我认为您更有可能需要更改标记,以便标记更有效地适应用例。

然而,因为我提到它。这是......

<强> CODE:

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

希望这有帮助,

答案 1 :(得分:0)

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

由于父母是hidden,它将级联到孩子身上。