He aquí una pequeña función javascript, de cosecha propia, que puede resultarte de utilidad si apuestas por el javascript no intrusivo.
Su uso y utilidad: pasamos a la función una referencia a un elemento DOM (obtenida mediante document.getElementById('elIdentificador');, d21d o cualquier otro método de nuestro gusto) y un nombre de clase. Si el atributo class del elemento ya contiene dicho nombre, se elimina. Si no lo contiene, se añade.
He aquí el código, comentado con verborrea para instrucción pública:
function toggleClassName(el, name) {
// indica si hemos eliminado o no la clase
var deleted = false;
// obtenemos un array de nombres de clase
// dividiendo la cadena `className` en cada
// espacio
var aClasses = el.className.split(' ');
// recorremos el array para averiguar si
// contiene o no la clase que deseamos
// añadir/eliminar
for (var i = 0; !deleted && i < aClasses.length; ++i) {
if (aClasses[i] == name) { // si la contiene
// eliminamos el ítem del array
delete(aClasses[i]);
// e indicamos que ya la hemos borrado
deleted = true;
}
}
if (!deleted) { // si no la hemos borrado
// hay que añadirla, hagámoslo
aClasses[aClasses.length] = name;
}
// volvemos a convertir el array en una cadena
// y la asignamos al atributo `class`
el.className = aClasses.join(' ');
}
4 comentarios RSS
Digo yo, no queriendo subestimar tus capacidades Javascripteras, no sería más fácil usar className.replace() con una expresión regular?
Si el objetivo es eliminar la clase, sí, sería más sencillo realizar un reemplazo utilizando expresiones regulares.
Pero lo que aquí se pretende es eliminar la clase si existe y agregarla si no existe. No se me ocurre una manera inteligible de hacerlo con expresiones regulares.
Igual si uno se decide a usar la libreria prototype la vida es mucho más fácil.
… o algo así :P
Lo que bueno es encontrar un blog que hable de javascript en español, llegué aqui mediante mis referers, no sé por qué.
+suscribe
Sosa, si uno se decide a usar la librería prototype, la vida es mucho más pesada ;) En cualquier caso, si uno se decide a usar esta función y, de paso,
d21d, la vida no deja de ser sencilla. Sencillísima:En cuanto a tus referers… vigila tus espaldas, amiguete ;)