Css3

Como añadir una clase css a un elemento html

Por : Jhons_1101
2016-05-18
Tags :
Siempre nos topamos con la necesidad de implementarle clases a los elementos del DOM en una pagina web.
Es sencillo cuando la definimos desde el HTML, basta con enunciar el atributo class="" pasandole como paramettro el nombre de la clase que le queremos asignar.
Pero o siempre será asi de sencillo. Ya que no todas las veces vamos a estar en código HTML, a veces queremos definir parametrizaciones dinámicas que nos afectara el DOM. estas parametrizaciones llamese PHP o javascipt alteran el comportamiento del DOM y por ende la estructura y diseño. cuando queremos hacer lo anterior basta hacer esto para cambiar el estado de una clase CSS.
  • Veamos:

  • Suponiendo que tengamos esta estructura que seria básica.
    
    
    <html>
       <div class="divTexto" id="IDelemento" >Este es un Div de ejemplo para agregar clases al elemento con js </div>
    </html>
    
    


    Tendremos varias opciones para realizar este proceso, gracias a la propiedad de javascript.
    Esta, una de las maneras que podemos hacerlo.
    compartir en facebook compartir en Google compartir en Twitter compartir en Blogger compartir como código embebido compartir la url

  • 1. Mediante el elemento del DOM.
  • 
    //Primero que todo, definimos un "ID" para el elemnto, nos va a hacer la vida mas sencilla.
    var elemento = document.getElementById("IDelemento");
    elemento.className += " otherclass";
    console.log(elemento);
    //</div class="divTexto otherclass" id="IDelemento">
      Este es un Div de ejemplo para agregar clases al elemento con js
    </div>
    
    

    Hemos añadido la propiedad "className" para definir el nombre de la clase "Css" que queremos asignarle. concatenándole las clases actuales más la nueva clase definida. separada por un espacio, ya que al no tenerlo. se pegarína las clases y nos leeria. Generando una nueva clase.
    Ejemplo: Suponiendo que agregamos la clase "divError" al elemento y esta ya cuente con clases anteriormente definidas. al hacerlo de esta manera (concatenando clases) y no le damos el espacio el código quedaría de esta manera.

    
     <html>
       <div class="divTextodivError" id="IDelemento" >Este es un Div de ejemplo para agregar clases al elemento con js </div>
     </html>
    
    

    Ya que el espacio separaría las cadenas de texto quedando algo así: <div class="divTexto divError" id="IDelemento" >

  • 2. Mediante el atributo "add" del método "classList" del DOM.
  • Este método algo más seguro que el anterior, ya que no se debe establecer el espacio " " entre las clases anteriores y la nueva clase. Puesto que este método esta configurado para hacerlo automáticamente.
    Veamos el código.

    Teniendo el mismo código base fuente.
    
     var elemento = document.getElementById("IDelemento");
     elemento.classList.add("divError");
    
     // para eliminar clases Css con javascript mediante "classList"
     var elemento = document.getElementById("IDelemento");
     elemento.classList.remove("divError");
    
    

    La salida del código seriá algo asi..!
    <div class="divTexto divError" id="IDelemento" >

  • 3. Mediante el método "addClass de Jquery.
  • Ya la mayoría conocemos jquery, un plugin estándar de manipulación del Dom mediante JavaScript. jquery, nos ofrece su método "addClass", para agregar nuevas clases CSS directamente desde archivos JavaScript. Veamos.

    
     $(document).ready( function() {
       // para agregar clases Css con jquery
       $('#IDelemento').addClass('divError');
    
       // para eliminar clases Css con jquery
       $('#IDelemento').removeClass('divError');
     });
    
    

    Podemos tambien crear un par de funciones que agregen o quiten clases CSS.


    
    function addClass( nombreClase, elemento ) {
        var cn = elemento.nombreClase;
        // Verificamos si existe
        if( cn.indexOf( nombreClase ) != -1 ) {
          return;
        }
        // Añadir un espacio si el elemento ya tiene clase
        if( cn != '' ) {
          nombreClase = ' '+nombreClase;
        }
        elemento.nombreClase = cn+nombreClase;
    }
    
    function removeClass( nombreClase, elemento ) {
        var cn = elemento.nombreClase;
        var rxp = new RegExp( "\\s?\\b"+nombreClase+"\\b", "g" );
        cn = cn.replace( rxp, '' );
        elemento.nombreClase = cn;
    }
    
    


  • No olvides revisar la sección de "Pantallazos" para que veas el Ejemplo.





  • 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)

    RUfhkua





    Este post no tiene comentarios, sé el primero en hacerlo
    Esta entrada no cuenta con imágenes adjuntas

    Unete al grupo de whatsApp +57 316 392 6456

    Sigue el grupo en facebook

    Siguenos.....