检查元素在DOM中是否可见

有什么方法，我可以检查如果一个元素是可见的纯JS(没有jQuery) ?

因此，给定一个DOM元素，我如何检查它是否可见?我试着:

window.getComputedStyle(my_element)['display']);

但这似乎并不奏效。我想知道我应该检查哪些属性。我想到了:

display !== 'none'
visibility !== 'hidden'

还有我可能漏掉的吗?

当前回答

var visible = document.getElementById("yourelementID's");
 if (visible){
          // make events
 } else
 {
   //other events
 }

2022-07-21 08:05:48

其他回答

来自http://code.jquery.com/jquery-1.11.1.js的jQuery代码有一个isHidden参数

var isHidden = function( elem, el ) {
    // isHidden might be called from jQuery#filter function;
    // in that case, element will be second argument
    elem = el || elem;
    return jQuery.css( elem, "display" ) === "none" || !jQuery.contains( elem.ownerDocument, elem );
};

因此，看起来有一个与所有者文档相关的额外检查

我想知道这是否真的适用于以下情况:

基于zIndex隐藏在其他元素后面的元素完全透明的元素使它们不可见位于屏幕外的元素(即左:-1000px) 具有可见性的元素:隐藏有显示的元素:无没有可见文本或子元素的元素高度或宽度设置为0的元素

2014-11-13 18:02:25

如果你正在抓取网站，一个非常低效的方法对我来说是突出显示任何元素，然后截图，然后检查截图是否发生了变化。

//Screenshot

function makeSelected(element){
    let range = new Range()
    range.selectNode(element)
    let selection = window.getSelection()
    selection.removeAllRanges()
    selection.addRange(range)
}
// screenshot again and check for diff

2022-04-20 19:54:36

仅供参考，应该注意getBoundingClientRect()在某些情况下可以工作。

例如，使用display: none简单检查元素是否被隐藏，可能看起来像这样:

var box = element.getBoundingClientRect();
var visible = box.width && box.height;

这也很方便，因为它还涵盖了零宽度、零高度和位置:固定的情况。但是，它不应该报告使用opacity: 0或visibility: hidden隐藏的元素(但是也不会报告offsetParent)。

2015-07-01 18:39:14

公认的答案对我不起作用。

2020年分解。

The (elem.offsetParent !== null) method works fine in Firefox but not in Chrome. In Chrome position: fixed will also make offsetParent return null even the element if visible in the page. User Phrogz conducted a large test (2,304 divs) on elements with varying properties to demonstrate the issue. https://stackoverflow.com/a/11639664/4481831 . Run it with multiple browsers to see the differences. Demo: //different results in Chrome and Firefox console.log(document.querySelector('#hidden1').offsetParent); //null Chrome & Firefox console.log(document.querySelector('#fixed1').offsetParent); //null in Chrome, not null in Firefox <div id="hidden1" style="display:none;"></div> <div id="fixed1" style="position:fixed;"></div> The (getComputedStyle(elem).display !== 'none') does not work because the element can be invisible because one of the parents display property is set to none, getComputedStyle will not catch that. Demo: var child1 = document.querySelector('#child1'); console.log(getComputedStyle(child1).display); //child will show "block" instead of "none" <div id="parent1" style="display:none;"> <div id="child1" style="display:block"></div> </div> The (elem.clientHeight !== 0). This method is not influenced by position: fixed and it also check if element parents are not-visible. But it has problems with simple elements that do not have a css layout and inline elements, see more here Demo: console.log(document.querySelector('#inline1').clientHeight); //zero console.log(document.querySelector('#div1').clientHeight); //not zero console.log(document.querySelector('#span1').clientHeight); //zero <div id="inline1" style="display:inline">test1 inline</div> <div id="div1">test2 div</div> <span id="span1">test3 span</span> The (elem.getClientRects().length !== 0) may seem to solve the problems of the previous 3 methods. However it has problems with elements that use CSS tricks (other then display: none) to hide in the page. Demo console.log(document.querySelector('#notvisible1').getClientRects().length); console.log(document.querySelector('#notvisible1').clientHeight); console.log(document.querySelector('#notvisible2').getClientRects().length); console.log(document.querySelector('#notvisible2').clientHeight); console.log(document.querySelector('#notvisible3').getClientRects().length); console.log(document.querySelector('#notvisible3').clientHeight); <div id="notvisible1" style="height:0; overflow:hidden; background-color:red;">not visible 1</div> <div id="notvisible2" style="visibility:hidden; background-color:yellow;">not visible 2</div> <div id="notvisible3" style="opacity:0; background-color:blue;">not visible 3</div>

结论。

所以我向你们展示的是没有什么方法是完美的。要进行适当的可见性检查，必须结合使用后3种方法。

2019-11-28 22:47:09

这就是我所做的:

HTML和CSS:默认情况下使元素隐藏

<html>
<body>

<button onclick="myFunction()">Click Me</button>

<p id="demo" style ="visibility: hidden;">Hello World</p> 

</body>
</html>

JavaScript:增加了一个代码来检查可见性是否被隐藏:

<script>
function myFunction() {
   if ( document.getElementById("demo").style.visibility === "hidden"){
   document.getElementById("demo").style.visibility = "visible";
   }
   else document.getElementById("demo").style.visibility = "hidden";
}
</script>

2018-05-27 09:18:36

检查元素在DOM中是否可见

推荐文章

最新文章

标签