检查元素在DOM中是否可见

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

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

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

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

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

还有我可能漏掉的吗?

当前回答

结合上面的几个答案:

function isVisible (ele) {
    var style = window.getComputedStyle(ele);
    return  style.width !== "0" &&
    style.height !== "0" &&
    style.opacity !== "0" &&
    style.display!=='none' &&
    style.visibility!== 'hidden';
}

就像AlexZ说的，这可能会比你的一些其他选择更慢，如果你更具体地知道你在寻找什么，但这应该抓住所有隐藏元素的主要方式。

但是，这也取决于你认为什么是可见的。例如，一个div的高度可以设置为0px，但内容仍然可见，这取决于溢出属性。或者，可以将div的内容设置为与背景相同的颜色，这样用户就不会看到它，但仍然可以在页面上显示。或者一个div可以移出屏幕或隐藏在其他div后面，或者它的内容可以是不可见的，但边界仍然可见。在一定程度上，“可见”是一个主观术语。

2015-07-09 14:25:01

其他回答

所以我找到了最可行的方法:

function visible(elm) {
  if(!elm.offsetHeight && !elm.offsetWidth) { return false; }
  if(getComputedStyle(elm).visibility === 'hidden') { return false; }
  return true;
}

这是基于以下事实:

显示:所有元素(即使是嵌套的元素)都没有宽度和高度。可见性即使对于嵌套的元素也是隐藏的。

因此不需要测试offsetParent或在DOM树中循环来测试哪个父对象具有可见性:hidden。这应该可以在ie9中工作。

你可能会说，如果透明度:0和折叠的元素(有宽度但没有高度-反之亦然)也不是真正可见的。但话说回来，它们并不是隐藏的。

2016-04-20 08:19:52

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

//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

这就是我所做的:

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

这是一种确定所有css属性(包括可见性)的方法:

html:

<div id="element">div content</div>

css:

#element
{
visibility:hidden;
}

javascript:

var element = document.getElementById('element');
 if(element.style.visibility == 'hidden'){
alert('hidden');
}
else
{
alert('visible');
}

它适用于任何css属性，非常通用和可靠。

2014-11-15 01:41:35

Chrome 105(以及Edge和Opera)和Firefox 106引入了element . checkvisibility()，如果元素是可见的，则返回true，否则返回false。

该函数检查了使元素不可见的各种因素，包括display:none、可见性、内容可见性和不透明度:

let element = document.getElementById("myIcon");
let isVisible = element.checkVisibility({
    checkOpacity: true,      // Check CSS opacity property too
    checkVisibilityCSS: true // Check CSS visibility property too
});

旁注:checkVisibility()以前被称为isVisible()。看这个GitHub问题。参见这里的checkVisibility()规范草案。

2022-06-22 14:29:24

检查元素在DOM中是否可见

推荐文章

最新文章

标签