Css3

Manejo de data-etiquetas con css y js

Por : Jhons_1101
2015-11-23
Tags :
HTML 5 está diseñado con la mentalidad en el manejo de los datos como un 'elemento particular', los atributos de datos [data-* attributos] nos permiten almacenar información extra en los elementos HTML de manera semántica que se pueden manipular en el DOM.

Sintaxis data atributos HTML5

Una sintaxis simple. Cualquier atributo de un elemento que comience con 'data-xxx'. Es ideal si de desea almacenar alguna información extra que no tiene ninguna representación visual en un elemento html.

<div id="divEjm1" class="Section" data-seccion="2" data-label="sección 2" ></div>

las data-etiquetas no pretende ser utilizable públicamente. Los meta-datos no deben usarse si hay un atributo existente o elemento que es más apropiado para el almacenamiento de los datos. Por ejemplo, colocar un metadato 'data-type' para definir un tipo de elemento o 'data-name' para definir el nombre..
compartir en facebook compartir en Google compartir en Twitter compartir en Blogger compartir como código embebido compartir la url

  • El uso de data-atributos con javaScript
  • Si queremos recuperar o actualizar estos atributos (data-etiquetas) utilizando los recursos existentes,

    Con JavaScript nativo

    podemos hacerlo a través de los métodos getAttribute y setAttribute

       
       
    	<div id="divEjm1" class="Section" ></div>
    	
       
    

    Este método funciona en todos los navegadores modernos, al ser javaScript nativo.

    Existe un segundo método para manipular las data-etiquetas y mediante la API de HTML5


  • dataset HTML5
  • Este método captura todos las data-etiquetas de un elemento. generándome un DOMStringMap que se puede recorrer utilizando el nombre del atributo dejando a un lado el prefijo 'data' que se refiere a los datos personalizados directamente usando el nombre que ha asignado a la misma.

       
       
    	<div id="divEjm1" class="Section" data-contador="7" data-unidad="2" ></div>
    
    	
       
    


    Durante el desarrollo de la aplicación, puede que le resulte útil seleccionar los elementos en base a la presencia de una 'data-etiqueta, Esto se puede lograr rápidamente y fácilmente usando querySelectorAll como se muestra a continuación:
       
    	
       
    

  • El uso de data-atributos con CSS
  • Tenga en cuenta que, como las data-etiquetas son atributos HTML planos, incluso se puede acceder a ellos desde CSS. Por ejemplo para manipular el elemento con CSS basta con utilizar la función attr ().

       
       
    	#divEjm1 {
    	  content: attr(data-unidad);
    	}		
    	
    
    También puede utilizar los selectores de atributos de CSS para cambiar estilos de acuerdo a los datos:
       
       
    	table[data-columnas='3'] {
    	  width: 33,3%;
    	}
    	table[data-columnas='4'] {
    	  width: 25%;
    	}
       
    




    Si este contenido te fue útil, no olvides compartirlo en redes sociales, Considéralo. Puede ser la manera de agradecer!


    Agrega tu comentario...

    Puedes utilizar etiquetas <pre></pre>, <p></p>, <div></div>, + (Nombre usuario, para responderle a alguien)

    G8TZu0U





    st3v3n1101
    2016-06-02 16:09:53
    This kind of game gives a real experience
    st3v3n1101
    2016-06-02 16:09:31
    Estuve buscando una pagina en español que me explicara esto y llegue aqui.. que bueno.
    Esta entrada no cuenta con imágenes adjuntas

    Unete al grupo de whatsApp +57 316 392 6456

    Sigue el grupo en facebook

    Siguenos.....