Wenn Sie sich HTML ansehen, sehen Sie häufig die Verwendung von Datenrollen, Datenthemen usw. Der Header-Effekt kann beispielsweise durch den folgenden Code erreicht werden:
<div data-role=header> <h1>Ich bin der Titel</h1> </div>
Warum kann das Schreiben eines data-role=header den Effekt eines schwarzen Bodens und zentrierten Textes erzielen?
Dieser Artikel bietet die einfachste Implementierungsmethode, um jedem ein intuitives Verständnis dieser Verwendungen zu vermitteln.
Wir schreiben eine HTML-Seite und passen ein data-chb=header-Attribut an. Wir hoffen, dass die Hintergrundfarbe des Div-Bereichs mit diesem Attribut schwarz ist, der Text weiß ist und die entsprechenden Divs angezeigt werden Wenn das benutzerdefinierte Attribut data-chb nicht vorhanden ist, wird es standardmäßig angezeigt. Der HTML-Code lautet wie folgt:
<body> <div data-chb=header> <h1>Ich habe das benutzerdefinierte Attribut data-chb für das div verwendet</h1> </div> <br/> <div>Ich habe das benutzerdefinierte Attribut data-chb nicht verwendet . , zeigen Sie es an, wie Sie möchten </div> </body>
Um einen Anzeigeeffekt zu erzielen, bei dem die Hintergrundfarbe schwarz, der Text weiß und die Anzeige zentriert ist, definieren wir das folgende CSS:
<style> .ui_header {background-color: black; text-align: center; border:1px solid #000;Dann verwenden wir die folgende js-Methode, um CSS-Definitionen dynamisch hinzuzufügen und den Anzeigestil von Divs mit data-chb-Attributen zu ändern, wenn die Seite geladen wird:
<script type=text/javascript> window.onload=function(){ var elems = document.getElementsByTagName(div); if(elems!=null&&elems.length>0){ var length = elems.length; Control for(var i=0;i<length;i++){ var elem = elems[i]; //Benutzerdefinierte Attribute des Steuerelements abrufen var customAttr = elem.dataset.chb; //Sie können benutzerdefinierte Attribute auch auf folgende Weise erhalten //var customAttr = elem.dataset[chb] //Wenn es sich um einen Header-Wert handelt, den wir vordefiniert haben, bedeutet dies, dass dies der Fall sein muss verarbeitet if(customAttr==header ){ //Stil hinzufügen elem.setAttribute(class,ui_header); } } } </script>Zusätzlich zu den oben genannten Funktionen verfügt dieses Attribut natürlich auch über andere Funktionen, z. B. das Erstellen von Daten über JS, das Füllen von Daten usw.;
ZusammenfassenDas Obige ist das vom Herausgeber eingeführte HTML5-Attribut „data-“. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht. Der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!