Question

我在分析领域工作，大部分时间我都在使用CSS选择器来解决我的问题。现在我正在网站上工作，我需要检测是否隐藏了<p>元素。所以这是两种可能的情况：

<p namehere hidden>This paragraph should be hidden.</p>
<p namehere This paragraph should be hidden.</p>

返回关于<p>元素隐藏状态的布尔值的最简单方法是什么？

谢谢！

Answer 1

您可以使用p函数捕获所有getElementsByTagName元素，迭代它们并检查指定元素的hidden属性是否与null不同。

注意：如果hidden属性为null，则元素没有隐藏属性。

var elems = document.getElementsByTagName('p');
    Array.from(elems).forEach(function(v,i) {
      if (v.getAttribute('hidden') == null) {
        console.log(v);
      }
    });

<p namehere hidden>This paragraph should be hidden.</p>
<p namehere>This paragraph should be hidden.</p>

Answer 2

您正在寻找getAttribute。在这种情况下，getAttribute如果没有属性则返回null，如果有属性则返回''。

您可以像这样迭代标记：

var paragraphs = document.getElementsByTagName("p");

for(var i = 0; i < paragraphs.length; i++){
  if(paragraphs[i].getAttribute("hidden") !== null){
    // The paragraph is hidden and can be accessed with paragraphs[i]
    console.log(paragraphs[i].innerHTML + ' is hidden');
  } else {
    // The paragraph not is hidden and can be accessed with paragraphs[i]
    console.log(paragraphs[i].innerHTML + ' is not hidden');
  }
}

<p>Paragraph 1</p>
<p hidden>Paragraph 2</p>
<p>Paragraph 3</p>

Answer 3

如果您正在使用Jquery，您可以直接使用hasClass函数。

Jquery hasClass

如果您正在寻找纯JavaScript，可以使用此功能

function hasClass(element, className) {
return new RegExp(' ' + className + ' ').test(' ' + element.className + ' ');}

如何使用纯javascript检测HTML隐藏属性

3 个答案: