Comentario: HTML5 ha agregado una nueva característica a los atributos de datos personalizados, es decir, Atributos personalizados de datos. En HTML5, podemos usar el prefijo con datos, para establecer las propiedades personalizadas que necesitamos para almacenar algunos datos
Por supuesto, en los navegadores avanzados, puede definir y acceder a los datos a través de scripts. Muy útil en la práctica de proyectos.
Por ejemplo:
Use el método de atributo para acceder al valor de los datos:* Atributo personalizado
Es muy conveniente usar el método de atributos para acceder al valor de los datos:* Atributo personalizado:
// use getAttribute para obtener datos: atributo
VAR usuario = documento. getElementById ('Usuario');
VAR Nombre de usuario = planta. getAttribute ('data-uname'); // username = 'Script House'
VAR UserId = planta. getAttribute ('data-uid'); // userId = '12345'
// use setAttribute para establecer datos de datos
usuario. setAttribute ('data-site', 'http://www.vevb.com');
Este método funciona bien en todos los navegadores modernos, pero no es el atributo de datos personalizados:* atributo de HTML 5 que se usa para su uso, de lo contrario no será diferente de los atributos personalizados que utilizamos antes, por ejemplo:
<div id = "user" uid = "12345" uname = "script house"> </div>
<script>
// use getAttribute para obtener datos: atributo
VAR usuario = documento. getElementById ('Usuario');
VAR Nombre de usuario = planta. getAttribute ('uname'); // username = 'Script House'
VAR UserId = planta. getAttribute ('uid'); // userId = '12345'
// use setAttribute para establecer datos de datos
usuario. setattribute ('sitio', 'http://www.vevb.com');
</script>
Este atributo personalizado "original" no es diferente del atributo personalizado de datos anterior, y los nombres de los atributos de conocimiento son diferentes.
El atributo del conjunto de datos accede al valor de los datos:* atributo personalizado
De esta manera, accede al valor del atributo del conjunto de datos de un atributo de datos:* Atributo personalizado accediendo al atributo del conjunto de datos de un elemento. Esta propiedad del conjunto de datos es parte de la API JavaScript HTML5 y se utiliza para devolver un objeto DOMSTRINGMAP con todos los atributos de datos de elementos seleccionados.
Al usar este método, en lugar de usar el nombre completo del atributo, como Data-UID, el prefijo de datos debe eliminarse.
Otra nota especial es: si el nombre del atributo de datos contiene guión, por ejemplo: Data Fechle-of-Birthth, el guión se eliminará y se convertirá en nombres similares a camellos. El nombre del atributo anterior debe convertirse: dateOfBirth.
<div data-id = "1234567890" data-name = "script house" data-de-birth> puerta </div>
<script type = "text/javaScript">
var el = document.Queryselector ('#user');
console.log (el.id); // 'usuario'
console.log (el.dataset); // a domstringmap
console.log (el.dataset.id); // '1234567890'
console.log (el.dataset.name); // 'Casa de guión'
console.log (el.dataset.dateofbirth); // ''
el.dataset.DateOfBirth = '1985-01-05'; // Establecer el valor de la fecha de datos de datos.
console.log ('somedataattr' en el.dataset); // falso
el.dataset.somedataattr = 'mydata';
console.log ('somedataattr' en el.dataset); // verdadero
</script>
Si desea eliminar una propiedad de datos, puede hacer esto: Eliminar El. conjunto de datos. identificación ; o el .dataset. id = nulo; .
Se ve hermoso, jaja, pero desafortunadamente, el nuevo atributo de conjunto de datos solo se implementa en Chrome 8+ Firefox (Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+ Browsers, por lo que el mejor uso GetAttribute y SetAttribute para operar durante este período.
Acerca de Data-Property Selector
En el desarrollo real, puede encontrarlo útil, puede seleccionar elementos relacionados basados en su atributo de datos personalizado. Por ejemplo, use QuerySelectorAll para seleccionar elementos:
// Seleccione todos los elementos que contienen el atributo 'Flotador de datos'
documento . QuerySelectorAll ('[Data-Flowering]');
// Seleccione todos los elementos con el valor del atributo 'Data-Text-Color'
documento . QuerySelectorAll ('[data-text-colour = "rojo"]');
Del mismo modo, también podemos establecer los estilos CSS para los elementos correspondientes a través del valor del atributo de datos, como el siguiente ejemplo:
<style type = "text/css">
.user {
Ancho: 256px;
Altura: 200px;
}
.user [data-name = 'feiwen'] {
Color: marrón
}
.user [data-name = 'css'] {
Color: rojo
}
</style>
<div class = "user" data-id = "123" data-name = "feiwen"> 1 </div>
<div class = "user" data-id = "124" data-name = "CSS"> Pier </div>