Explicación detallada de los atributos personalizados de datos HTML5-*

En attr y prop de jQuery, se menciona que el uso inadecuado de propiedades en versiones anteriores a IE9 provocará pérdidas de memoria, y la diferencia entre Atributo y Propiedad también es muy problemática. En HTML5, se agrega el método data-* para personalizar los atributos. el llamado data-* es en realidad el prefijo de datos más un nombre de atributo personalizado. Los datos se pueden almacenar utilizando dicha estructura. El uso de data-* puede resolver la situación actual de atributos personalizados confusos y no administrados.

Hay dos métodos de configuración para datos-*, que se pueden escribir directamente en etiquetas de elementos HTML.

 <div id=test data-age=24> Haga clic aquí </div>

La era de datos es un atributo personalizado. Por supuesto, también podemos operarlo a través de JavaScript. Los elementos en HTML5 tendrán un atributo de conjunto de datos, que es una colección de pares clave-valor del tipo DOMStringMap.

 var prueba = document.getElementById('prueba'); test.dataset.my = 'Byron';

Esto agrega un atributo personalizado de data-my al div. Hay dos cosas a las que prestar atención cuando se usa JavaScript para operar el conjunto de datos.

1. Necesitamos eliminar el prefijo data-* al agregar o leer atributos. Como en el ejemplo anterior, no usamos el formulario test.dataset.data-my = 'Byron';.

2. Si el nombre del atributo también contiene un guión (-), debe convertirse a nombres en mayúsculas y minúsculas. Pero si se usa un selector en CSS, debemos usar el formato de guión.

Agregue contenido al código ahora mismo

 <tipo de estilo=texto/css> [fecha-de-nacimiento] { color de fondo: #0f0; ancho:100px; margen:20px;

 test.dataset.birthDate = '19890615';

De esta manera, configuramos el atributo personalizado de fecha de nacimiento de datos a través de JavaScript y agregamos algunos estilos al div en la hoja de estilos CSS para ver el efecto.

Al leer, también es a través del objeto del conjunto de datos, utilizando . Para obtener los atributos, el prefijo de datos también debe eliminarse y los guiones deben convertirse en nombres en mayúsculas y minúsculas.

 var prueba = document.getElementById('prueba'); test.dataset.my = 'Byron'; test.dataset.birthDate = '19890615'; test.onclick = function () { alerta(this.dataset.my + ' ' + this.dataset.age+' '+this.dataset.birthDate);

Algunos estudiantes pueden preguntar si hay alguna diferencia entre esto y getAttribute/setAttribute excepto el nombre.

 var test = document.getElementById('test'); test.dataset.birthDate = '19890615'; test.setAttribute('age', 25); test.setAttribute('data-sex', 'masculino'); log(test.getAttribute('edad-datos')); //24 console.log(test.getAttribute('fecha-nacimiento-datos')); //19890516 console.log(test.dataset.age); //24 console.log(test.dataset.sex);

De esto podemos ver que ambos establecen atributos en atributos (sin sentido, de lo contrario se pueden llamar atributos personalizados), lo que significa que getAttribute/setAttribute puede operar en todos los contenidos del conjunto de datos, y el contenido del conjunto de datos es solo un subconjunto de atributos. Lo importante es el nombre, pero solo hay atributos con el prefijo de datos en el conjunto de datos (no hay uno de edad = 25).

Entonces, ¿por qué seguimos usando data-*? Una de las mayores ventajas es que podemos administrar todos los atributos personalizados de manera unificada en el objeto del conjunto de datos. Es muy conveniente recorrer todo sin estar dispersos, por lo que aún es bueno usarlo.

La mala noticia es que la compatibilidad del navegador de data-* es muy pesimista.

1. Explorador de Internet 11+
2. Cromo 8+
3. Firefox 6.0+
4. Ópera 11.10+
5. Safari 6+

Entre ellos, IE11+ simplemente está cegando los ojos de mis amigos. Parece que queda un largo camino por recorrer para utilizar este atributo por completo.

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.