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:
[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,’ ‘);
}
};
[/javascript]
Se usa de la siguiente manera:
[javascript]
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”
[/javascript]
Bastante útil cuando usamos elementos selectores 🙂
admin
March 23, 2016
javascript
No Comment