使用纯javascript只获取可见元素

Question

我有如下元素

<div class="one">send Message</div>

<div class="one">send Message</div>

<div class="one">send Message</div>

我有一个网页，上面有像上面一样的发送消息按钮，其中一次只有一个按钮可见。其他两个按钮通过一些 javascript 代码隐藏。例如，如果第二个按钮可见，我应该能够得到只有那个元素。

所以我的代码将类似于

document.querySelector(".one:visible");

在 jquery 中，代码是$(".one:visible");，它工作正常，但我需要知道如何通过纯 javascript 来做到这一点。

Answer 1

这是您可以使用的纯 Javascript：

// Get all elements on the page (change this to another DOM element if you want)
var all = document.getElementsByTagName("*");

for (var i = 0, max = all.length; i < max; i++) {
    if (isHidden(all[i]))
        // hidden
    else 
        // visible
}

function isHidden(el) {
    var style = window.getComputedStyle(el);
    return ((style.display === 'none') || (style.visibility === 'hidden'))
}

Answer 2

我有更短的东西：

Array.from(document.querySelectorAll('.one')).filter(s =>
   window.getComputedStyle(s).getPropertyValue('display') != 'none'
);

返回所有具有属性display block集的元素。

Answer 3

使用getBoundingClientRect。如果元素不在 DOM 中或未显示，它将返回高度和宽度为零。

请注意，这不能用于确定元素是否由于visibility: hidden或而不可见opacity: 0。据我所知，这种行为与 jQuery“选择器”相同:visible。显然 jQuery 使用offsetHeightand offsetWidthof 0 来检查不可见性。

此解决方案也不会检查该项目是否由于不在屏幕上而不可见（尽管您可以很容易地检查），或者该元素是否隐藏在某些其他元素后面。

另请参阅检测元素是否可见（不使用 jquery）