Cuando miras HTML, a menudo ves el uso de función de datos, tema de datos, etc. Por ejemplo, el efecto de encabezado se puede lograr mediante el siguiente código:
<div data-role=header> <h1>Yo soy el título</h1> </div>
¿Por qué escribir un data-role=header puede lograr el efecto de fondo negro y texto centrado?
Este artículo proporciona el método de implementación más simple para brindarles a todos una comprensión intuitiva de estos usos.
Escribimos una página HTML y personalizamos un atributo data-chb=header. Esperamos que el color de fondo del área div con este atributo sea negro, el texto sea blanco y se muestre en el centro; Si no tiene el atributo personalizado data-chb, se mostrará de forma predeterminada, el código html es el siguiente:
<body> <div data-chb=header> <h1>Usé el atributo personalizado data-chb para el div</h1> </div> <br/> <div> No usé el atributo personalizado data-chb , muéstralo como quieras;
Para lograr un efecto de visualización donde el color de fondo es negro, el texto es blanco y la visualización está centrada, definimos el siguiente CSS:
<estilo> .ui_header { color de fondo: negro; alineación de texto: centro; color: blanco; borde: 1px sólido } </estilo>Luego usamos el siguiente método js para agregar dinámicamente definiciones CSS y cambiar el estilo de visualización de divs con atributos data-chb cuando se carga la página:
<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] //Obtener los atributos personalizados del control var customAttr = elem.dataset.chb; //También puede obtener atributos personalizados de la siguiente manera //var customAttr = elem.dataset[chb] //Si es un valor de encabezado que hemos predefinido, significa que debe ser procesado if(customAttr==header ){ //Agregar estilo elem.setAttribute(class,ui_header);Por supuesto, además de las funciones anteriores, este atributo también tiene otras funciones, como construir datos a través de JS, completar datos, etc .;
ResumirLo anterior es el atributo HTML5: 'datos-' que le presentó el editor. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!