Introducción al artículo de Wulin.com (www.vevb.com): La implementación de atributos personalizados en HTML5 no es técnicamente complicada. La verdadera dificultad es si el método que elige usar es adecuado para su proyecto; Si corresponde, ¿cómo hacerlo más efectivo? Recuerde que es demasiado pronto para habilitar el método del conjunto de datos como una función de página, después de todo, muchos navegadores no admiten esta función.
El desarrollo HTML5 está en pleno apogeo, y el uso de atributos personalizados en HTML5 está ganando popularidad gradualmente entre los desarrolladores; Además, también juega un papel importante en la semántica del desarrollo web. En este artículo, exploraremos la creación y el acceso de las propiedades de datos personalizados HTML5, incluidas las funciones de JavaScript, a través de ejemplos prácticos.
Antes de usar HTML5, primero agregue atributos personalizados al elemento HTML y acceda a él a través de JavaScript. Si lo ha probado antes, encontrará que es fácil ignorar la verificación de la etiqueta, y HTML5 puede proporcionarle la función de crear y usar los atributos de su propio elemento dentro de una página web válida.
Crear archivos HTML5:
Si no ha descubierto cuál usar, puede copiar el siguiente código:
<! Doctype html>
<html>
<Evista>
<script>
/*Funciones aquí*/
</script>
</ablo>
<Body>
</body>
< /html>
Establezca elementos personalizados en el cuerpo y acceda a ellos utilizando elementos JavaScript en parte del área de script de la cabeza.
Crear elementos:
Primero, agregue un contenido simple y atributos personalizados, así como elementos como IDS para que podamos reconocer ejemplos de JavaScript.
<div ID = Product1 Data-Product-Category = Clothing>
Camisa de algodón
</div>
Como puede ver, el atributo personalizado es en forma de: data-*, establece el nombre en la sección de datos o el nombre que seleccionó. El uso de propiedades personalizadas en HTML5 es la única forma de hacerlo. Por lo tanto, si desea verificar que la página web sea válida, puede usar este método.
Por supuesto, la parte de detalles del proyecto determina si una propiedad personalizada es útil para usted y cómo nombrarla. Este ejemplo se puede aplicar a sitios web minoristas en diferentes categorías de productos.
Las propiedades personalizadas le permiten usar el código JavaScript dentro de la página de una manera especial para establecer elementos, como capacidades de visualización de animación. Si no hay elementos HTML estándar, recomendamos usar propiedades personalizadas.
Agregue un botón de prueba
El evento se puede ejecutar utilizando sus propios elementos JavaScript en la página, siempre que el siguiente código se agregue a la página:
<Entrada type = button value = get attribute onClick = getElementAttribute ('Product1')/>
Obtener atributos:
La forma más común de acceder a las propiedades en JavaScript es usar GetAttributes, que también es el primer paso que debemos hacer. Agregue la siguiente función en el área de script de cabeza de la página:
función getElementAttribute (Elemid) {
var theElement = document.getElementById (elemid);
var theattribute = theElement.getAttribute ('Data-Product-Category');
alerta (theattribute);
}
Aquí, hemos agregado el valor de alerta al ejemplo y, por supuesto, también puede agregarlo en el script de acuerdo con sus propias necesidades.
Obtener datos:
Puede usar conjuntos de datos de elementos en lugar de DOM getAttributes, lo que puede ser más eficiente, especialmente en algunos casos en que el código itera a través de múltiples atributos, sin embargo, el soporte del navegador para el conjunto de datos sigue siendo muy bajo, por lo que tener esto en cuenta puede ejecutar el mismo proceso que el método // detrás de él.
// var theattribute = theElement.getAttribute ('data-prop. var theattribute = theElement.dataset.productCategory;
Eliminar datos: en el conjunto de datos que comienza con el nombre del atributo, todavía se incluye en el HTML.
Tenga en cuenta que si tiene un guión en el nombre de su propiedad personalizado, esto tomará el caso de camello de formulario cuando se accede a través de los datos, es decir (la categoría de productos de datos se convierte en ProductCategory).
Otros módulos y funciones
Hemos obtenido esta propiedad y el script aún se puede configurar y eliminar. El siguiente código demuestra cómo establecer propiedades utilizando módulos y conjuntos de datos JavaScript estándar.
También puede usar el método o conjunto de datos DOM para eliminar un cierto atributo:
// método DOM
TheElement.RemoveAttribute ('Data-Product-Category');
// versión de conjunto de datos
TheElement.Dataset.ProductCategory = NULL;
Conclusión:
La implementación de propiedades personalizadas en HTML5 no es técnicamente complicada. La verdadera dificultad es si el método que elige usar es adecuado para su proyecto; Si es así, ¿cómo puede hacerlo más efectivo? Recuerde que es demasiado pronto para habilitar el método del conjunto de datos como una función de página, después de todo, muchos navegadores no admiten esta función.