Lorsque vous regardez HTML, vous voyez souvent l'utilisation de données-rôle, données-thème, etc. Par exemple, l'effet d'en-tête peut être obtenu grâce au code suivant :
<div data-role=header> <h1>Je suis le titre</h1> </div>
Pourquoi l'écriture d'un data-role=header peut-elle obtenir l'effet d'un fond noir et d'un texte centré ?
Cet article propose la méthode de mise en œuvre la plus simple pour donner à chacun une compréhension intuitive de ces usages.
Nous écrivons une page HTML et personnalisons un attribut data-chb=header. Nous espérons que la couleur d'arrière-plan de la zone div avec cet attribut sera noire, le texte sera blanc et il sera affiché au centre des divs ; Si l'attribut personnalisé data-chb n'est pas affiché par défaut, le code html est le suivant :
<body> <div data-chb=header> <h1>J'ai utilisé l'attribut personnalisé data-chb pour le div</h1> </div> <br/> <div> Je n'ai pas utilisé l'attribut personnalisé data-chb . , affichez-le comme vous le souhaitez ;
Pour obtenir un effet d'affichage où la couleur d'arrière-plan est noire, le texte est blanc et l'affichage est centré, nous définissons le CSS suivant :
<style> .ui_header { background-color: black; text-align: center; color:white; border:1px solid #000 } </style>Ensuite, nous utilisons la méthode js suivante pour ajouter dynamiquement des définitions CSS et modifier le style d'affichage des divs avec les attributs data-chb lorsque la page est chargée :
<script type=text/javascript> window.onload=function(){ var elems = document.getElementsByTagName(div); if(elems!=null&&elems.length>0){ var length = elems.length; //Parcourir tous les DIV; Control for(var i=0;i<length;i++){ var elem = elems[i] //Obtenir les attributs personnalisés du contrôle var customAttr = elem.dataset.chb; //Vous pouvez également obtenir des attributs personnalisés de la manière suivante //var customAttr = elem.dataset[chb]; //S'il s'agit d'une valeur d'en-tête que nous avons prédéfinie, cela signifie qu'elle doit être traité if(customAttr==header ){ //Ajouter un style elem.setAttribute(class,ui_header);Bien entendu, en plus des fonctions ci-dessus, cet attribut a également d'autres fonctions, telles que la construction de données via JS, le remplissage de données, etc. ;
RésumerCe qui précède est l'attribut HTML5 : 'data-' présenté par l'éditeur. J'espère qu'il vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !