javascript - 使用纯 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'))
}