Cómo modificar clase de CSS con Javascript

El HTML se mantiene estático y no posee capacidad de ejecución de fragmentos de códigos que se basen en dinámicas condiciones. Tampoco tiene provisiones que permitan ocultar o mostrar ciertas etiquetas o elementos HTML al cumplirse determinada condición. Por eso, aprende a modificar clase CSS con Javascript.

De esa manera, serás capaz de asignarle los estilos relacionados que quieras y tendrás un mejor desarrollo web. Hay técnicas muy diversas envueltas en la manipulación de CSS, así que te conviene identificar cuáles son las más exactas.

Significados de clases de CSS con Javascript

El atributo “class” se emplea como referencia a los sectores diferentes de clase en CSS. Por lo tanto, no debe confundirse con las clases de tipo ES de la función especial de Javascript.

Estas clases CSS, que pueden modificarse, son usadas para la aplicación de estilos en varios elementos. En contraste con los ID, estas pueden existir solo 1 vez en cada página. A continuación se especifican varias, y verás cómo se identifican con diferentes términos que se asocian a su descripción:

• classList.add:  Agrega un valor o más de clase.
• classList.contains: Comprueba que el valor exista.
• classList.toggle: Desactiva o activa una clase.
• classList.remove: Elimina algún valor.
• className: Establece u obtiene algún valor de clase.
• classList.replace: Sustituye algún valor que ya existe por uno totalmente nuevo.

Cambio de una propiedad única CSS

Coloquemos como ejemplo que quieres cambiar este párrafo, y colocarlo en un fondo fucsia por alguna razón. Si su HTML es como:

<p id=»intro»>Coloquemos como ejemplo que quieres cambiar este párrafo,…</p>

Llevar a cabo el cambio en el color sería así de simple:

var intro = document.getElementById(‘intro’);

intro.style.backgroundColor = ‘#FF00FF’;

Todos los elementos HTML de Javascript poseen su propia propiedad style, representando estilos en líneas. Eso significa que, una vez ejecutada la línea anterior de código, tendrá un resultado similar a este:

<p id=»intro» style=»background-color: rgb(255, 0, 255);»>

  Coloquemos como ejemplo que quieres cambiar este párrafo,…

</p>

Para deshacerlo, bastará con que le asignes null a esa propiedad para eliminar cualquier rastro del fucsia:

intro.style.backgroundColor = null;

La propiedad conocida como style también contiene cssText, un atributo para asignar una cadena para diversas propiedades CSS. Sin embargo, esta acción va a sobre-escribir el otro estilo preexistente en línea.

intro.style.cssText = ‘background-color: black; color: white;’;

Manipulación de clases CSS en un elemento tipo HTML

Existe otro ejemplo que te servirá de guía para cambiar una clase con Javascript. Supongamos que en la hoja externa de estilo está esta clase:

.negativo {

  background-color: black;

  color: white;

}

Podrás asignar esta clase, en el momento que quieras, al párrafo usado anteriormente, para que sea:

var intro = document.getElementById(‘intro’);

intro.className = ‘negativo’;

Y el resultado final sea el siguiente:

<p id=»intro» class=»negativo»>Coloquemos como ejemplo que quieres cambiar este párrafo,…</p>

Como solo es una representación de atributo class HTML, también puedes usar className. De ese modo, lograrás asignar más de una clase al mismo tiempo, o eliminarlas si asignas vacía la cadena.

classList también hace posible eliminar, añadir, consultar y alternar cómodamente clases CSS:

intro.classList.add(‘gatitos’, ‘ositos’);

intro.classList.remove(‘ositos’);

intro.classList.toggle(‘gatitos’); // Si tiene «gatitos» bórralos, si no añádelos

console.log(intro.classList.contains(‘gatitos’)); // → false

El único inconveniente con classList es que tiene limitaciones o deja de funcionar en navegadores muy antiguos. Por lo que, de necesitar compatibilidad con un navegador prehistórico, tendrás que incorporar polyfill o usar solo className.

Alternación de hojas externas

Aparte de la posibilidad de modificar clase CSS con Javascript, puedes sustituir una hoja completa de estilo. Nuevamente funciona usar un ejemplo como estilo_moderno.css por  estilo_retro.css.

Eso permitirá cambiar de manera dinámica el tema o diseño completo de tu página al CSS Zen Garden. Para mayor comodidad, identifica el elemento correspondiente <link> a través del atributo id:

<link id=»estilos» rel=»stylesheet» href=»css/moderno.css»>

Así solo te correspondería asignar la ruta nueva para el atributo href de ese elemento ya dicho:

document.getElementById(‘estilos’).href = ‘css/retro.css’;

Cuando esa línea se ejecute, el navegador va a descargar y aplicar la hoja nueva de estilo para sustituir la anterior.

Ayuda para modificar clase CSS con Javascript

Aprender cómo modificar clase CSS con Javascript implica adquirir una habilidad del nivel de desarrolladores web profesionales. Por eso, si necesitas ayuda para que todo salga perfecto, en LoDigitalizo nos ofrecemos a dártela.

No solo tenemos experiencia en el servicio de modificar clase CSS con Javascript. Aparte de ello, sabemos todo lo relacionado con diseño web, desarrollo de aplicaciones y software, así que cuentas con nosotros.