使用纯 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 执行此操作。

原文由 Vishnu 发布，翻译遵循 CC BY-SA 4.0 许可协议

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'))
}

原文由 Koby Douek 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我有更短的东西：

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

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

原文由 hbrade 发布，翻译遵循 CC BY-SA 4.0 许可协议