Wie HTML verstecktes Attribut mit reinem Javascript zu entdecken

Question

Ich arbeite im Analytics-Bereich und die meiste Zeit verwende ich CSS-Selektor, um mein Problem zu lösen. Im Moment arbeite ich an einer Website, wo ich feststellen muss, ob ein <p> Element versteckt ist oder nicht. so ist hier die zwei mögliche Situation:

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

Was ist der einfachste Weg, um einen boolean in Bezug auf die verborgenen Status des <p> Element zurückzukehren?

Danke!

Answer 1

Sie könnten alle p Elemente mit getElementsByTagName Funktion zu fangen, über sie iterieren und prüfen, ob angegebene Element hidden als null Attribut unterschiedlich ist.

Hinweis: Wenn hidden Attribut null ist - Element hat kein verstecktes Attribut.

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

Wenn Sie mit Jquery arbeiten, können Sie direkt hasClass-Funktion verwenden.

Jquery hasClass

Wenn Sie für reinen Javascript suchen, können Sie diese Funktion nutzen

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

Answer 3

Sie suchen nach getAttribute suchen. In diesem Fall würde getAttributenull zurückgeben, wenn kein Attribut vorhanden ist, oder '', wenn es ein Attribut gibt.

Sie können Tags iterieren etwa so:

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>