De igual forma que podemos modificar los elementos y estructura del DOM, también podemos cambiar sus estilos.
La manipulación de estilos en JavaScript puede hacerse a través de dos principales métodos:
- Modificación directa del estilo: Cambiando los valores de estilo de los elementos.
- Manipulación de clases CSS: Agregando, eliminando o alternando clases que definen los estilos.
Modificación directa de estilos CSS
Con JavaScript, puedes cambiar directamente las propiedades CSS de un elemento. Esto se realiza utilizando la propiedad style del elemento y asignando valores a las propiedades CSS que desees modificar.
| Comando | Descripción |
|---|---|
elemento.style.propiedadCSS = 'valor' | Cambia el estilo directamente. |
Expande para ver más propiedades de estilo
| Comando | Descripción |
|---|---|
elemento.style.propiedadCSS = 'valor' | Cambia el estilo CSS directamente en línea. |
elemento.style.color = 'blue' | Cambia el color del texto. |
elemento.style.backgroundColor = 'yellow' | Cambia el color de fondo del elemento. |
elemento.style.fontSize = '18px' | Ajusta el tamaño de la fuente. |
elemento.style.width = '200px' | Define el ancho del elemento. |
elemento.style.height = '100px' | Define la altura del elemento. |
elemento.style.margin = '10px' | Ajusta el margen del elemento. |
elemento.style.padding = '15px' | Ajusta el relleno interno del elemento. |
elemento.style.border = '2px solid black' | Establece un borde para el elemento. |
elemento.style.borderRadius = '5px' | Define el radio de las esquinas del borde. |
elemento.style.boxShadow = '2px 2px 10px gray' | Aplica sombra al elemento. |
Veamos algunos ejemplos
Puedes cambiar las propiedades de color y fondo utilizando las propiedades color y backgroundColor.
elemento.style.color = 'red';
elemento.style.backgroundColor = 'yellow';Propiedades como fontSize, width, height, margin, y padding permiten ajustar el tamaño y el espaciado de los elementos.
elemento.style.fontSize = '18px';
elemento.style.width = '200px';
elemento.style.height = '100px';
elemento.style.margin = '10px';
elemento.style.padding = '15px';Puedes añadir bordes y sombras utilizando propiedades como border, borderRadius, y boxShadow.
elemento.style.border = '2px solid black';
elemento.style.borderRadius = '5px';
elemento.style.boxShadow = '2px 2px 10px gray';Manipulación de Clases CSS
La manipulación de clases es una técnica más flexible y organizada que evita llenar el código con estilos en línea.
Usamos las propiedades classList del elemento para agregar, eliminar o alternar clases.
| Comando | Descripción |
|---|---|
elemento.classList.add('clase') | Agrega una clase al elemento. |
elemento.classList.remove('clase') | Elimina una clase del elemento. |
elemento.classList.toggle('clase') | Alterna una clase en el elemento. |
add()
El método add() permite añadir una o más clases a un elemento, asegurándose de que no estén duplicadas. Esto es útil para aplicar estilos o indicar un estado específico de un elemento.
elemento.classList.add('activo');En este ejemplo, se añade la clase activo al elemento, lo que podría, por ejemplo, cambiar su color o hacerlo visible según los estilos definidos en tu archivo CSS.
remove()
El método remove() elimina una o más clases de un elemento. Es una forma práctica de revertir un estado visual o funcional previamente aplicado.
elemento.classList.remove('invisible');Aquí, la clase invisible se elimina del elemento, probablemente haciendo que el elemento vuelva a ser visible en la página si esa clase controlaba su visibilidad.
toggle()
El método toggle() añade la clase si no está presente y la elimina si ya lo está. Esto es especialmente útil para crear interacciones dinámicas con un solo comando.
elemento.classList.toggle('resaltado');Por ejemplo, este código podría alternar un estilo destacado en un botón al ser clicado, mejorando la experiencia del usuario con un comportamiento interactivo.
Uso de variables CSS
Otra forma de modificar el estilo de un elemento es modificar una variable CSS. Esta variable actuará de forma conjunta con las hojas CSS para dar formato al elemento.
| Comando | Descripción |
|---|---|
document.documentElement.style.setProperty('--variable', 'valor') | Modifica dinámicamente el valor de una variable CSS personalizada. |
Modificar variables con JavaScript:
document.documentElement.style.setProperty('--color-principal', 'lightcoral');Definir variable en CSS:
:root {
--color-principal: lightblue;
}
#miElemento {
background-color: var(--color-principal);
}Lectura de estilos computados
También podemos obtener el estilo actualmente aplicado a un elemento, incluyendo los estilos heredados o calculados por el navegador:
| Comando | Descripción |
|---|---|
window.getComputedStyle(elemento).propiedad | Obtiene el valor calculado de una propiedad. |
Por ejemplo,
const estiloComputado = window.getComputedStyle(elemento);
console.log(estiloComputado.backgroundColor);Aplicar transiciones y animaciones
También podemos usar JavaScript para aplicar transiciones y animaciones CSS.
Primero define las reglas en una hoja de estilos CSS y luego utiliza JavaScript para modificar las propiedades que desencadenan estas animaciones.
Por ejemplo para activar una transición,
Desencadenar transición con JavaScript
elemento.style.backgroundColor = 'blue';Definir transición en CSS
#miElemento {
transition: background-color 0.5s ease;
}