使用纯javascript只获取可见元素

问题描述：

我有以下元素

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

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

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

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

I have a web page where there is send Message buttons like above, in which only one button is visible at a time.Other two buttons are hidden via some javascript codes.So for example if 2nd button is visible , I should be able to get only that element.

所以我的代码将类似于

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

在jquery中，代码是 $（。one：visible）; ，工作正常，但我需要知道如何通过纯JavaScript进行此操作。

In jquery the code is $(".one:visible"); , which works fine , But I need to know how to do this via pure javascript.

答

以下是您可以使用的内容，纯Javascript：

Here's something you can use, pure 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'))
}

使用纯javascript只获取可见元素

相关推荐