Las formas en que puedes aplicar estilos a los elementos de la página, de forma dinámica, usando JavaScript simple
Es posible que tenga la necesidad de aplicar dinámicamente propiedades CSS a elementos DOM.
¿Cuáles son las API que el navegador expone para hacer eso?
En primer lugar, una de las formas más limpias es agregar o eliminar clases de un elemento y usar el estilo de clases en su CSS.
const element = document.querySelector('#my-element')
Puedes utilizar la classList
propiedad de un elemento y sus add()
métodos remove()
:
element.classList.add('myclass')element.classList.remove('myclass')
También puedes cambiar directamente cada propiedad CSS de un elemento utilizando la style
propiedad , que hace referencia a los estilos en línea del elemento .
Por ejemplo, puedes cambiar el color de un elemento usando
element.style.color = '#fff'
Puedes modificar el borde:
element.style.border = '1px solid black'
Viste color
y border
. Puedes cambiar todas las propiedades CSS, utilizando camelCase en lugar de guiones cuando el nombre de la propiedad CSS los contiene. ¿QUÉ SARTÉN COMPRAR? Comparativa, precios y análisis de LAS MEJORES SARTENES
En esta página de MDN se incluye convenientemente una tabla de traducción .
Tips para principiantes de JavaScript
Tal vez te puede interesar:
- Cómo generar un número aleatorio entre dos números en JavaScript
- Cómo esperar el evento DOM listo en JavaScript simple
- Cómo determinar si una fecha es hoy en JavaScript
- Cómo contar el número de propiedades en un objeto JavaScript
Cómo aplicar estilo a elementos DOM usando JavaScript
Las formas en que puedes aplicar estilos a los elementos de la página, de forma dinámica, usando JavaScript simple
programar
es
https://aprendeprogramando.es/static/images/programar-como-aplicar-estilo-a-elementos-dom-usando-javascript-1886-0.jpg
2024-10-29
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente