Manipular estilos y clases CSS en nodos del DOM

Autor: | Última modificación: 19 de octubre de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

El DOM o Document Object Model es un concepto basado en la idea de un árbol jerárquico compuesto de etiquetas (o nodos) HTML. Todas estas etiquetas son instancias de la clase element, lo que nos permite acceder y modificar sus datos mediante propiedades y métodos comunes. En este post, te enseñaremos cómo manipular estilos y clases CSS en nodos del DOM desde las propiedades de la clase element.

¿Cómo manipular estilos y clases CSS en nodos del DOM?

Al igual que hemos visto en nuestro post sobre manipular atributos del DOM, existen una serie de propiedades y métodos que nos permiten manipular estilos y clases CSS en nodos del DOM. Es decir, podemos seleccionar un nodo del DOM específico y acceder a sus estilos o clases para manipularlos. A continuación, te mostramos cómo funcionan estos comandos.

nodo.style

Esta propiedad de solo lectura nos permite conocer el estilo del elemento o nodo HTML seleccionado. Es decir, después de ejecutar este comando, obtendremos como respuesta la línea de estilo en el formato de declaración de CSS. Si no existen estilos dentro del elemento, como es el caso del ejemplo que manejamos en el post mencionado, obtendremos un null.

Aunque se considera que esta propiedad es solo de lectura, podemos utilizarla para añadir un estilo a un nodo HTML. Para ello, basta con igualar el método a la línea de estilo que queremos en nuestro nodo HTML. Para conocer más sobre este método, te recomendamos leer el post HTMLElement.style en la página oficial de la Mozilla Developer Network.

inputElement.style = background-color: blue

nodo.className

Esta propiedad nos permite obtener y definir el valor del atributo class del nodo determinado. Esto se utiliza principalmente cuando manejamos valores como active e inactive al referirnos a una clase. Para conocer más sobre cómo esta propiedad nos permite manipular estilos y clases CSS en nodos del DOM, te invitamos a leer el post Element.className de la MDN.

nodo.classList

La propiedad element.classlist nos permite acceder a las clases de un nodo HTML. Es decir, con él podemos añadir una clase o revisar las clases actuales del nodo. En nuestro caso, inputElement todavía no tiene ninguna clase, por lo que, si insertamos esta propiedad, obtendremos como respuesta un array vacío. A continuación, te mostramos esas líneas de código:

inputElement.classList

DOMTokenList [value: ‘ ‘]

De esta propiedad se despliegan varios comandos más que nos permiten manipular estilos y clases CSS en nodos del DOM al añadir, eliminar y comprobar clases dentro de un elemento HTML. A continuación, te explicamos cómo funciona cada una.

nodo.classList.add(<CSS name>)

Este comando nos permite añadir una clase a un nodo del DOM. A continuación, te mostramos la línea de código que sería necesaria para añadir una clase text-input en nuestro inputElement:

inputElement.classList.add (‘text-input’)

Al ejecutar la línea de código anterior, veremos el nombre de clase en nuestro elemento. Además, si ahora consultamos las clases con inputElement.classList, obtendremos de vuelta un DOMTokenList [‘text-input’, value: ‘text-input’].

nodo.classList.remove(<CSS name>)

Este comando nos permite eliminar una clase de un nodo HTML. A continuación, te mostramos la línea de código necesaria para eliminar la clase que hemos creado en el punto anterior:

inputElement.classlist.remove(‘text-input’)

nodo.classList.toggle(<CSS name>)

Este comando nos permite alternar la función. Es decir, nos permite definir una clase y, si el nodo HTML no la tiene, se la añade. Sin embargo, si el nodo HTML sí tiene la clase, se la elimina. A continuación, te mostramos la línea de código que usaríamos para añadir de nuevo la clase text-input a inputElement:

inputElement.classlist.toggle (‘text-input’)

true

Si ejecutáramos este método repetidas veces, veríamos cómo el valor que obtenemos de respuesta pasaría de true a false y de false a true infinitas veces.

nodo.classList.contains(<CSS name>)

Este comando funciona de manera muy similar al comando nodo.hasAttribute, ya que nos permite comprobar si un nodo tiene o no una clase al pasar como parámetro el nombre de clase. En este sentido, nos responde un valor booleano: true o false.

¿Te animas a seguir aprendiendo?

Ahora que sabes cómo manipular estilos y clases CSS en nodos del DOM, seguro que quieres seguir aprendiendo sobre este aspecto del desarrollo web para crear tus propios proyectos. Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación íntegra e intensiva donde aprenderás a desarrollar todo tipo de proyectos con diversas herramientas y lenguajes de programación, como JavaScript (para front y backend), JSX, HTML y CSS.

¿Te animas a seguir aprendiendo con nosotros para destacar en el sector IT? ¡Pide ya más información y averigua cómo cambiar tu vida!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!