¿Cuanta importancia tiene el orden de los atributos en el código HTML? Algunos desarrolladores web le damos más y otros menos, todo depende...
Atributos propios en HTML5
Con los nuevos atributos propios podemos definir atributos personalizados en un elemento para almacenar información sin que sea visible al usuario, las ventajas son importantes ya que conseguimos un código más legible y válido, mejorando así el posicionamiento y el mantenimiento del sitio web.
Los programadores que creamos nuestros proyectos desde cero y nos preocupamos por escribir código válido, legible y semántico llevábamos tiempo esperando una solución para crear nuestros propios atributos y definir estilos o funcionalidades diferentes en los elementos.
Sintaxis
data-atributopropio="valorpropio"
Importante
Tanto el nombre como el valor del atributo tiene que ser una cadena (string) y no puede contener mayúsculas ni caracteres especiales.
Ni el nombre ni el valor del atributo deben contener datos sensibles.
Ejemplo
<div data-atributopropio="valorpropio" ></div>
Como acceder a los atributos
Es evidente que si utilizamos este tipo de atributos en un elemento es para que sean un recurso desde donde podamos acceder con JS, jQuery o CSS y operar sobre los mismos o recibir datos para almacenarlos y realizar alguna acción con ellos.
CSS
Desde la hoja de estilos podemos acceder a los atributos propios de la siguiente forma:
<div id="yy" data-nombre="Didesweb">
Diseño y desarrollo web
</div>
#yy::before {
content: attr(data-nombre) ":";
font-weight:bold;
}
[data-nombre] {
color:green;
}
Javascript
Podemos acceder a los atributos propios y operar sobre los mismos desde Javascript con los métodos getAttribute, setAttribute y removeAttribute
<p id="y" data-z="valorpropio">Elemento con atributo data-</p>
<button onclick="myFunction()">Try it</button>
<div id="v"></div>
<script>
function myFunction() {
var x= document.getElementById("y").getAttribute("data-z");
document.getElementById("v").innerHTML = x;
}
</script>
Aunque existe otra forma de acceder, utilizando la API dataset, esta API no es compatible con todos los navegadores por lo que es recomendable recurrir a librerías JS externas para su implementación si fuese necesario.
<span id="yyy" data-z="valorpropio">
Elemento con atributo data-
</span>
<span id="vv"></span>
<script>
function myFunction2() {
var elemento = document.getElementById("yyy");
data = elemento.dataset;
data.nuevovalor = 'valornuevo';
var xx= document.getElementById("yyy").getAttribute("data-z");
document.getElementById("vv").innerHTML = xx;
}
</script>
jQuery
Para acceder con jQuery lo más aconsejable es utilizar el método data(), este método no necesita el prefijo data-, accedemos al elemento con el nombre del atributo sin prefijo.
Si tenemos este elemento HTML:
<div id="qqq" data-atributopropio="valorpropio" ></div>
Obtenemos al valor del atributo con el siguiente código:
$(document).ready(function(){
var valorAtributo = jQuery("#qqq").data('atributopropio');
$("#m").on("click", function(){
$("#qqq").text(valorAtributo);
});
});
Acceso a sintaxis JSON
<div id="qqq-json" data-z='{"nombre":"valorpropio"}'></div>
var valorAtributo = jQuery("#qqq-json").data('z').nombre;
Tambien podemos agregar atributos propios a los elementos con jQuery y JSON, veamos un ejemplo más elaborado:
<button id="dddd">Obtener el valor del atributo</button>
<div id="nn">
<span id="fff"></span>
</div>
<script>
$(document).ready(function(){
$("#nn").data({g: "valorpropio"});
$("#dddd").on("click", function(){
$("#fff").text( $("#nn").data().g);
});
});
</script>
Y esto es todo de momento acerca de los “Custom Data Attributes” en HTML5, muchas gracias por visitar mi sitio web, si tienes alguna duda o sugerencia puedes contactar conmigo en la pestaña “Contacto” o a través de las redes sociales.
Quizás te interese ...
HTML5 incorpora nuevos atributos en los enlaces muy interesantes con las que se mejora la funcionalidad de este elemento con nuevas...
Los enlaces son un elemento imprescindible en cualquier sitio web, es por ello que debemos escribir correctamente el código y el...
Hoy hablaremos de los formularios web y de cómo construirlos semánticamente para que sean más accesibles, la accesibilidad web es muy...
Valoraciones
Sé el primero en valorar