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

Question

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

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

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

谢谢 ！

Answer 1

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

注意：如果hidden属性为空 - 元素没有隐藏属性。

 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

一个很老的问题，但是......这里描述的方法似乎不是

"(...)返回关于隐藏状态的布尔值的最简单方法

元素 （...）”

虽然获取所有<p>元素是必要的，但使用getAttribute()方法不是。 相反，只需测试元素对象的隐藏属性：

1. 只返回一个与隐藏属性相关的布尔值：（ Array.from() 语法）

 Array.from( document.getElementsByTagName("p"), element => console.log(element.hidden) );

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

2. 如果您想根据布尔值返回执行操作，您应该更喜欢以下语法：

 //Using forEach() method instead of map() for better loop handling Array .from(document.getElementsByTagName('p')) .forEach( element => { if(element.hidden){ console.log("This element is hidden."); }else{ console.log("This element is not hidden"); } } );

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

最终，没有getAttribute()方法，没有比较运算符，只有布尔属性检查。 恕我直言，听起来更直接。

参考： HTMLElement.hidden 属性（MDN）

Answer 4

可能实现这一目标的最快和最简单的方法如下

var elements = document.querySelectorAll('p:not([hidden])');

法比奥

Answer 5

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

Jquery hasClass

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

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