gpt4 book ai didi

javascript - 显示 :none 时停止获取 DOM 元素

转载 作者:行者123 更新时间:2023-11-27 23:23:20 26 4
gpt4 key购买 nike

我有一个要求,但不确定如何实现它。我有一个带有 display:none 的 div,我使用 document.getElementByName API 获取要在控制台中显示的元素。我有可能阻止这种情况发生吗?

期望是如果它有一个display: none,null应该是我访问它或者它的 child 时的查询结果

function fetchChildToNone(){
var _ele = document.getElementsByName('test_fetch');
console.log(_ele);
}
#div2{
display: none;
}
<!DOCTYPE html>
<html>
<head>
<title> Test fetching child to a parent with display:none</title>
</head>
<body onload="fetchChildToNone()">
<div id="div1">
<span> A div to not make the page empty</span>
</div>
<div id="div2">
<span id="test_fetch" name="test_fetch"> Hello World</span>
</div>
</body>
</html>

最佳答案

实际上没有办法知道一个元素是否可见,如果你只是测试这个元素。

唯一可用的方法是测试 offsetWidth offsetHeight 是否都等于 0 这意味着 显示了两个元素:none 或元素为空,但您真的不知道是否填充此元素后它会保持其偏移量等于 0。此外,如果您的元素位于 visibility:hidden 元素的偏移量不会等于0。所以这个解决方案不是最好的。

唯一能很好地做到这一点(没有框架)的方法是测试此元素及其所有父元素的 displayvisibility

function fetchChildToNone(){
var _ele = document.getElementsByName('test_fetch');

console.log(isVisible(_ele[0]));
}

function isVisible(elem) {
var style = window.getComputedStyle(elem, null);
if(style.display === 'none' || style.visibility === 'hidden') return false;
if(elem.parentNode && elem.parentNode.tagName !== 'body') return isVisible(elem.parentNode);

return true;
}
#div2{
display: none;
}
<!DOCTYPE html>
<html>
<head>
<title> Test fetching child to a parent with display:none</title>
</head>
<body onload="fetchChildToNone()">
<div id="div1">
<span> A div to not make the page empty</span>
</div>
<div id="div2">
<span id="test_fetch" name="test_fetch"> Hello World</span>
</div>
</body>
</html>

关于javascript - 显示 :none 时停止获取 DOM 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39891323/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com