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

Check if element is visible which parent is hidden in DOM

本文关键字：元素 隐藏 DOM 是否 检查      更新时间：2023-09-26

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是否可见呢？

此

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

因为父级是hidden，它将级联到子级。

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

但是，作为变通方案，您可以克隆它并显示克隆。不知道你为什么要这样做。我认为你更有可能需要更改标记，以便标记更有效地适应用例。

然而，既然我提到了它。这是…

代码：

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

希望这能有所帮助，

Tim

相关文章：