Agregar y quitar clases CSS a cualquier elemento DOM en Javascript

admin

March 23, 2016

javascript

No Comment

El siguiente script modifica el prototipo de HTMLElement para implementar la funcionalidad de agregar y quitar clases CSS fácilmente a cualquier elemento del DOM en javascript:

//  Función para buscar la clase en el elemento
HTMLElement.prototype.hasClass = function ( className ) {
  var rgx = new RegExp('(\\s|^)' + className + '(\\s|$)');
  var match = this.className.match( rgx );
  return ( match != null );
}

// Agrega una clase CSS al elemento
// @className es el nombre de la clase
HTMLElement.prototype.addClass = function( className ) {
    if (!this.hasClass(className))
      this.className += " " + className;
};

// Quita una clase CSS al elemento
// @className es el nombre de la clase
HTMLElement.prototype.removeClass = function( className ) {
  if (this.hasClass(className)) {
    var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
    this.className = this.className.replace(reg,' ');
  }
};

Se usa de la siguiente manera:

var d = document.getElementById('miElemento');
d.addClass( 'active' );
console.log( d ); // Aqui imprimira la clase dentro del atributo "class"
d.removeClass( 'active' );
console.log( d ); // Aqui YA NO imprimira la clase dentro del atributo "class"

Bastante útil cuando usamos elementos selectores 🙂

Related Posts

Safe Type Classes con Javascript Puro

Hoy en día tenemos TypeScript, un superset de Javascript type safe de Microsoft, y Dart, otro superset type safe pero de Google, y estan muy bien, pero digamos que no tienes el tiempo ni/o la voluntad de aprender otro lenguaje o superset de uno que ya sabes, y quieres implementar algo de type safety en […]

Read More

7 extensiones a las cadenas en Javascript que ahorran mucho código y se ven elegantes

admin

March 26, 2016

javascript

No Comment

Estas 7 funciones básicas de cadenas son fáciles de implementar como extensiones del objeto String, son muy utilizadas y el código resultante es mucho más legible, mantenible y elegante: 1 y 2: Encode y Decode Uri A pesar de que las uso seguido, eso de añadir el sufijo “Component” a la función siempre se me […]

Read More

Leave a Reply

Your email address will not be published. Required fields are marked *

Busca en el blog aqui

Herramientas Útiles

Suscribete al blog

Recibe en tu correo las últimas publicaciones

Publicidad

Sígueme en Twitter