小开

这可能有助于: 将元素隐藏在最左边的位置，然后检查offsetLeft属性。如果你想使用jQuery，你可以简单地检查可见: 选择器，并获得元素的可见状态

HTML:

<div id="myDiv">Hello</div>

CSS:

<!-- for javaScript-->
#myDiv{
position:absolute;
left : -2000px;
}


<!-- for jQuery -->
#myDiv{
visibility:hidden;
}

javaScript:

var myStyle = document.getElementById("myDiv").offsetLeft;


if(myStyle < 0){
alert("Div is hidden!!");
}

jQuery:

if(  $("#MyElement").is(":visible") == true )
{
alert("Div is visible!!");
}

jsFiddle

小开

如果我们只是收集检测能见度的基本方法，让我不要忘记:

opacity > 0.01; // probably more like .1 to actually be visible, but YMMV

至于如何获取属性:

element.getAttribute(attributename);

所以，在你的例子中:

document.getElementById('snDealsPanel').getAttribute('visibility');

但世界卫生大会吗?在这里行不通。仔细观察，您会发现可见性不是作为元素上的属性更新的，而是使用style属性更新的。这是你在尝试做你正在做的事情时遇到的许多问题之一。其中:你不能保证元素中确实有东西可看，只是因为它的可见性、显示和不透明度都有正确的值。它仍然可能缺少内容，或者缺少高度和宽度。另一个物体可能会使它模糊。要了解更多细节，快速搜索谷歌会显示这，甚至包括一个尝试解决问题的库。(YMMV)

看看下面的问题，它们可能是这个问题的副本，有很好的答案，包括来自强大的约翰·雷西格的一些见解。但是，您的特定用例与标准用例略有不同，因此我将避免标记:

如何判断一个DOM元素是否在当前视口中可见?< / >

# EYZ0

(编辑:OP说他刮页，而不是创建他们，所以下面是不适用的) 还有更好的选择吗?将元素的可见性绑定到模型属性，并始终使可见性取决于该模型，就像Angular对ng-show所做的那样。你可以使用任何你想要的工具:Angular、纯JS等等。更好的是，您可以随时更改DOM实现，但始终能够从模型而不是DOM读取状态。从DOM读取你的真相是不好的。而缓慢。最好检查模型，并信任您的实现，以确保DOM状态反映模型。(并使用自动测试来确认该假设)

小开

最佳答案

根据这个MDN文档，一个元素的offsetParent属性将返回null，当它或它的任何父元素通过display style属性隐藏时。只要确保元素不是固定的。如果你的页面上没有position: fixed;元素，一个检查这个的脚本可能看起来像:

// Where el is the DOM element you'd like to test for visibility
function isHidden(el) {
return (el.offsetParent === null)
}

另一方面，如果您做有位置固定的元素，可能会在此搜索中被捕获，那么您将不得不遗憾地(并且缓慢地)使用window.getComputedStyle()。这种情况下的函数可能是:

// Where el is the DOM element you'd like to test for visibility
function isHidden(el) {
var style = window.getComputedStyle(el);
return (style.display === 'none')
}

选项2可能更简单一点，因为它考虑了更多的边缘情况，但我打赌它也会慢很多，所以如果你不得不多次重复这个操作，最好避免它。

小开

jQuery代码http://code.jquery.com/jquery-1.11.1.js有一个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的元素

小开

这是一种确定所有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属性，非常通用和可靠。

小开

如果元素是常规可见的(display:block和visibility:visible)，但有些父容器是隐藏的，那么我们可以使用clientWidth和clientHeight来检查。

function isVisible (ele) {
return  ele.clientWidth !== 0 &&
ele.clientHeight !== 0 &&
(ele.style.opacity !== '' ? parseFloat(ele.style.opacity) > 0 : true);
}

< a href = " http://plnkr。co/edit/RoSIt2" rel="nofollow noreferrer">活塞(点击这里) . co/edit/RoSIt2" rel="nofollow noreferrer">活塞(点击这里

小开

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

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

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

这也很方便，因为它还涵盖了零宽度、零高度和position: fixed情况。但是，它不会报告隐藏在opacity: 0或visibility: hidden中的元素(但也不会报告offsetParent)。

小开

结合上面的几个答案:

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后面，或者它的内容可以是不可见的，但边界仍然可见。在一定程度上，“可见”是一个主观术语。

小开

下面是我编写的代码，用于在几个类似的元素中找到唯一可见的元素，并返回其“class”属性的值，而不使用jQuery:

  // Build a NodeList:
var nl = document.querySelectorAll('.myCssSelector');


// convert it to array:
var myArray = [];for(var i = nl.length; i--; myArray.unshift(nl[i]));


// now find the visible (= with offsetWidth more than 0) item:
for (i =0; i < myArray.length; i++){
var curEl = myArray[i];
if (curEl.offsetWidth !== 0){
return curEl.getAttribute("class");
}
}

小开

对我来说，所有其他的解决方案在某些情况下都失效了。

获胜的答案如下:

< a href = " http://plnkr.co/edit/6CSCA2fe4Gqt4jCBP2wu?p=preview " > http://plnkr.co/edit/6CSCA2fe4Gqt4jCBP2wu?p =预览< / >

最终，我认为最好的解决方案是$(elem).is(':visible')——然而，这不是纯javascript。它是jquery..

所以我偷看了他们的来源，找到了我想要的

jQuery.expr.filters.visible = function( elem ) {
return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

这是源代码:https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js

小开

当一个人有位置“固定”元素时，我有了一个比AlexZ的getComputedStyle()解决方案更高效的解决方案，如果一个人愿意忽略一些边缘情况(检查评论):

function isVisible(el) {
/* offsetParent would be null if display 'none' is set.
However Chrome, IE and MS Edge returns offsetParent as null for elements
with CSS position 'fixed'. So check whether the dimensions are zero.


This check would be inaccurate if position is 'fixed' AND dimensions were
intentionally set to zero. But..it is good enough for most cases.*/
return Boolean(el.offsetParent || el.offsetWidth || el.offsetHeight);
}

旁注:严格来说，“能见度”;首先需要定义。在我的情况下，我正在考虑一个元素可见，只要我可以运行所有DOM方法/属性上没有问题(即使不透明度为0或CSS可见性属性是“隐藏”等)。

小开

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

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

这是基于以下事实:

display: none元素(即使是嵌套的元素)没有宽度和高度。
即使对于嵌套元素，visiblity也是hidden。

所以不需要测试offsetParent或在DOM树中循环测试哪个父节点有visibility: hidden。这应该可以在ie9中工作。

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

小开

使用与jQuery相同的代码:

jQuery.expr.pseudos.visible = function( elem ) {
return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

在函数中:

function isVisible(e) {
return !!( e.offsetWidth || e.offsetHeight || e.getClientRects().length );
}

在我的Win/IE10、Linux/Firefox中工作得很好。45岁的Linux / Chrome.52……

感谢没有jQuery的jQuery!

小开

如果你对用户可见感兴趣:

function isVisible(elem) {
if (!(elem instanceof Element)) throw Error('DomUtil: elem is not an element.');
const style = getComputedStyle(elem);
if (style.display === 'none') return false;
if (style.visibility !== 'visible') return false;
if (style.opacity < 0.1) return false;
if (elem.offsetWidth + elem.offsetHeight + elem.getBoundingClientRect().height +
elem.getBoundingClientRect().width === 0) {
return false;
}
const elemCenter   = {
x: elem.getBoundingClientRect().left + elem.offsetWidth / 2,
y: elem.getBoundingClientRect().top + elem.offsetHeight / 2
};
if (elemCenter.x < 0) return false;
if (elemCenter.x > (document.documentElement.clientWidth || window.innerWidth)) return false;
if (elemCenter.y < 0) return false;
if (elemCenter.y > (document.documentElement.clientHeight || window.innerHeight)) return false;
let pointContainer = document.elementFromPoint(elemCenter.x, elemCenter.y);
do {
if (pointContainer === elem) return true;
} while (pointContainer = pointContainer.parentNode);
return false;
}

测试(使用摩卡术语):

describe.only('visibility', function () {
let div, visible, notVisible, inViewport, leftOfViewport, rightOfViewport, aboveViewport,
belowViewport, notDisplayed, zeroOpacity, zIndex1, zIndex2;
before(() => {
div = document.createElement('div');
document.querySelector('body').appendChild(div);
div.appendChild(visible = document.createElement('div'));
visible.style       = 'border: 1px solid black; margin: 5px; display: inline-block;';
visible.textContent = 'visible';
div.appendChild(inViewport = visible.cloneNode(false));
inViewport.textContent = 'inViewport';
div.appendChild(notDisplayed = visible.cloneNode(false));
notDisplayed.style.display = 'none';
notDisplayed.textContent   = 'notDisplayed';
div.appendChild(notVisible = visible.cloneNode(false));
notVisible.style.visibility = 'hidden';
notVisible.textContent      = 'notVisible';
div.appendChild(leftOfViewport = visible.cloneNode(false));
leftOfViewport.style.position = 'absolute';
leftOfViewport.style.right = '100000px';
leftOfViewport.textContent = 'leftOfViewport';
div.appendChild(rightOfViewport = leftOfViewport.cloneNode(false));
rightOfViewport.style.right       = '0';
rightOfViewport.style.left       = '100000px';
rightOfViewport.textContent = 'rightOfViewport';
div.appendChild(aboveViewport = leftOfViewport.cloneNode(false));
aboveViewport.style.right       = '0';
aboveViewport.style.bottom       = '100000px';
aboveViewport.textContent = 'aboveViewport';
div.appendChild(belowViewport = leftOfViewport.cloneNode(false));
belowViewport.style.right       = '0';
belowViewport.style.top       = '100000px';
belowViewport.textContent = 'belowViewport';
div.appendChild(zeroOpacity = visible.cloneNode(false));
zeroOpacity.textContent   = 'zeroOpacity';
zeroOpacity.style.opacity = '0';
div.appendChild(zIndex1 = visible.cloneNode(false));
zIndex1.textContent = 'zIndex1';
zIndex1.style.position = 'absolute';
zIndex1.style.left = zIndex1.style.top = zIndex1.style.width = zIndex1.style.height = '100px';
zIndex1.style.zIndex = '1';
div.appendChild(zIndex2 = zIndex1.cloneNode(false));
zIndex2.textContent = 'zIndex2';
zIndex2.style.left = zIndex2.style.top = '90px';
zIndex2.style.width = zIndex2.style.height = '120px';
zIndex2.style.backgroundColor = 'red';
zIndex2.style.zIndex = '2';
});
after(() => {
div.parentNode.removeChild(div);
});
it('isVisible = true', () => {
expect(isVisible(div)).to.be.true;
expect(isVisible(visible)).to.be.true;
expect(isVisible(inViewport)).to.be.true;
expect(isVisible(zIndex2)).to.be.true;
});
it('isVisible = false', () => {
expect(isVisible(notDisplayed)).to.be.false;
expect(isVisible(notVisible)).to.be.false;
expect(isVisible(document.createElement('div'))).to.be.false;
expect(isVisible(zIndex1)).to.be.false;
expect(isVisible(zeroOpacity)).to.be.false;
expect(isVisible(leftOfViewport)).to.be.false;
expect(isVisible(rightOfViewport)).to.be.false;
expect(isVisible(aboveViewport)).to.be.false;
expect(isVisible(belowViewport)).to.be.false;
});
});

小开

这是对奥哈德·纳冯的回答的一点补充。

如果元素的中心属于另一个元素，我们就找不到它。

为了确保元素的其中一个点是可见的

function isElementVisible(elem) {
if (!(elem instanceof Element)) throw Error('DomUtil: elem is not an element.');
const style = getComputedStyle(elem);
if (style.display === 'none') return false;
if (style.visibility !== 'visible') return false;
if (style.opacity === 0) return false;
if (elem.offsetWidth + elem.offsetHeight + elem.getBoundingClientRect().height +
elem.getBoundingClientRect().width === 0) {
return false;
}
var elementPoints = {
'center': {
x: elem.getBoundingClientRect().left + elem.offsetWidth / 2,
y: elem.getBoundingClientRect().top + elem.offsetHeight / 2
},
'top-left': {
x: elem.getBoundingClientRect().left,
y: elem.getBoundingClientRect().top
},
'top-right': {
x: elem.getBoundingClientRect().right,
y: elem.getBoundingClientRect().top
},
'bottom-left': {
x: elem.getBoundingClientRect().left,
y: elem.getBoundingClientRect().bottom
},
'bottom-right': {
x: elem.getBoundingClientRect().right,
y: elem.getBoundingClientRect().bottom
}
}


for(index in elementPoints) {
var point = elementPoints[index];
if (point.x < 0) return false;
if (point.x > (document.documentElement.clientWidth || window.innerWidth)) return false;
if (point.y < 0) return false;
if (point.y > (document.documentElement.clientHeight || window.innerHeight)) return false;
let pointContainer = document.elementFromPoint(point.x, point.y);
if (pointContainer !== null) {
do {
if (pointContainer === elem) return true;
} while (pointContainer = pointContainer.parentNode);
}
}
return false;
}

小开

这就是我所做的:

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>

小开

改进了@Guy Messika的以上回答，如果中心点' X是<，则中断并返回false;0是错误的，因为元素右边可能进入视图。这里有一个解决方案:

private isVisible(elem) {
const style = getComputedStyle(elem);


if (style.display === 'none') return false;
if (style.visibility !== 'visible') return false;
if ((style.opacity as any) === 0) return false;


if (
elem.offsetWidth +
elem.offsetHeight +
elem.getBoundingClientRect().height +
elem.getBoundingClientRect().width === 0
) return false;


const elementPoints = {
center: {
x: elem.getBoundingClientRect().left + elem.offsetWidth / 2,
y: elem.getBoundingClientRect().top + elem.offsetHeight / 2,
},
topLeft: {
x: elem.getBoundingClientRect().left,
y: elem.getBoundingClientRect().top,
},
topRight: {
x: elem.getBoundingClientRect().right,
y: elem.getBoundingClientRect().top,
},
bottomLeft: {
x: elem.getBoundingClientRect().left,
y: elem.getBoundingClientRect().bottom,
},
bottomRight: {
x: elem.getBoundingClientRect().right,
y: elem.getBoundingClientRect().bottom,
},
};


const docWidth = document.documentElement.clientWidth || window.innerWidth;
const docHeight = document.documentElement.clientHeight || window.innerHeight;


if (elementPoints.topLeft.x > docWidth) return false;
if (elementPoints.topLeft.y > docHeight) return false;
if (elementPoints.bottomRight.x < 0) return false;
if (elementPoints.bottomRight.y < 0) return false;


for (let index in elementPoints) {
const point = elementPoints[index];
let pointContainer = document.elementFromPoint(point.x, point.y);
if (pointContainer !== null) {
do {
if (pointContainer === elem) return true;
} while (pointContainer = pointContainer.parentNode);
}
}
return false;
}

小开

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

2020年分解。

(elem.offsetParent !== null)方法在Firefox中很好，但在Chrome中不行。在Chrome中position: fixed也将使offsetParent返回null甚至元素，如果在页面中可见。

用户Phrogz对具有不同属性的元素进行了一个大型测试(2304次)来演示这个问题。# EYZ0。# EYZ1

演示:

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

(getComputedStyle(elem).display !== 'none')不起作用，因为元素可以是不可见的，因为父元素的一个display属性被设置为none， getComputedStyle将不会捕获它。

演示:

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>

# EYZ0。该方法不受position: fixed的影响，它还检查元素父元素是否不可见。但它有问题的简单元素，没有css布局和内联元素，点击这里查看更多信息

演示:

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>

(elem.getClientRects().length !== 0)似乎解决了前面3个方法的问题。然而，它有问题的元素使用CSS技巧(除了display: none)隐藏在页面中。

演示

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种方法。

小开

为了详细说明大家的精彩回答，下面是Mozilla Fathom项目中使用的实现:

/**
* Yield an element and each of its ancestors.
*/
export function *ancestors(element) {
yield element;
let parent;
while ((parent = element.parentNode) !== null && parent.nodeType === parent.ELEMENT_NODE) {
yield parent;
element = parent;
}
}


/**
* Return whether an element is practically visible, considering things like 0
* size or opacity, ``visibility: hidden`` and ``overflow: hidden``.
*
* Merely being scrolled off the page in either horizontally or vertically
* doesn't count as invisible; the result of this function is meant to be
* independent of viewport size.
*
* @throws {Error} The element (or perhaps one of its ancestors) is not in a
*     window, so we can't find the `getComputedStyle()` routine to call. That
*     routine is the source of most of the information we use, so you should
*     pick a different strategy for non-window contexts.
*/
export function isVisible(fnodeOrElement) {
// This could be 5x more efficient if https://github.com/w3c/csswg-drafts/issues/4122 happens.
const element = toDomElement(fnodeOrElement);
const elementWindow = windowForElement(element);
const elementRect = element.getBoundingClientRect();
const elementStyle = elementWindow.getComputedStyle(element);
// Alternative to reading ``display: none`` due to Bug 1381071.
if (elementRect.width === 0 && elementRect.height === 0 && elementStyle.overflow !== 'hidden') {
return false;
}
if (elementStyle.visibility === 'hidden') {
return false;
}
// Check if the element is irrevocably off-screen:
if (elementRect.x + elementRect.width < 0 ||
elementRect.y + elementRect.height < 0
) {
return false;
}
for (const ancestor of ancestors(element)) {
const isElement = ancestor === element;
const style = isElement ? elementStyle : elementWindow.getComputedStyle(ancestor);
if (style.opacity === '0') {
return false;
}
if (style.display === 'contents') {
// ``display: contents`` elements have no box themselves, but children are
// still rendered.
continue;
}
const rect = isElement ? elementRect : ancestor.getBoundingClientRect();
if ((rect.width === 0 || rect.height === 0) && elementStyle.overflow === 'hidden') {
// Zero-sized ancestors don’t make descendants hidden unless the descendant
// has ``overflow: hidden``.
return false;
}
}
return true;
}

它检查每个父元素的不透明度、显示和矩形。

小开

let element = document.getElementById('element');
let rect = element.getBoundingClientRect();


if(rect.top == 0 &&
rect.bottom == 0 &&
rect.left == 0 &&
rect.right == 0 &&
rect.width == 0 &&
rect.height == 0 &&
rect.x == 0 &&
rect.y == 0)
{
alert('hidden');
}
else
{
alert('visible');
}

小开

2021的解决方案

根据MDN文档，交互观察器异步观察目标元素与祖先元素或顶级文档的视口的交集中的变化。这意味着每当元素与视口相交时，交互观察器就会触发。

截至2021年，除IE外，目前所有浏览器都支持交集观测器。

实现

const el = document.getElementById("your-target-element");
const observer = new IntersectionObserver((entries) => {
if(entries[0].isIntersecting){
// el is visible
} else {
// el is not visible
}
});


observer.observe(el); // Asynchronous call

小开

有许多情况下，这将不一定工作，但在我的情况下，我正在使用这个，它为我所需要的工作。所以，如果你正在寻找一个基本的解决方案(不包括所有的可能性)，如果这个简单的解决方案适合你的特殊需求，它“可能”对你有帮助。

var element= document.getElementById('elementId');


if (element.style.display == "block"){


<!-- element is visible -->


} else {


<!-- element is hidden-->


}

小开

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

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

小开

const isVisible = (selector) => {
let selectedElement
let topElement
let selectedData
  

selectedElement = document.querySelector(selector)
  

if (!selectedElement) {
return false
}
  

selectedData = selectedElement.getBoundingClientRect()
if (!selectedData || !Object.keys(selectedData)) {
return false
}
  

if (!(selectedData.width > 0) || !(selectedData.height > 0)) {
return false
}
  

topElement = document.elementFromPoint(selectedData.top, selectedData.left)
  

if (selectedElement !== topElement) {
return false
}
  

return true
}


const output = document.querySelector('.text')
output.innerHTML = '.x element is visible: ' + isVisible('.x')

.block {
width: 100px;
height: 100px;
background: black;
}


.y {
background: red;
margin-top: -100px;
}

<div class="text"></div>
<div class="x block"></div>
<div class="y block"></div>

小开

铬103(也在火狐106上进行了测试)引入了Element.checkVisibility()，如果元素可见，则返回true，否则返回false。

它检查各种可以使元素不可见的因素，包括display:none， visibility， content-visibility和opacity:

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()。看到# EYZ3。
看到# EYZ1。

小开

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

检查元素在DOM中是否可见

2020年分解。

结论。

2021的解决方案

实现