Cómo diseñar elementos DOM usando JavaScript

Las formas en que puede aplicar estilo a los elementos de la página, dinámicamente, usando JavaScript simple

Es posible que tenga la necesidad de aplicar dinámicamente propiedades CSS a elementos DOM.

¿Qué están expuestos los navegadores de API para hacer eso?

Primero, una de las formas más limpias es agregar o eliminar clases de un elemento y usar estilos de clases en su CSS.

const element = document.querySelector('#my-element')

Puedes usar elclassListpropiedad de un elemento y suadd()yremove()métodos:

element.classList.add('myclass')
element.classList.remove('myclass')

También puede cambiar directamente cada propiedad CSS de un elemento utilizando elstylepropiedad, que hace referencia al elementoestilos en línea.

Por ejemplo, puede cambiar el color de un elemento usando

element.style.color = '#fff'

Puede modificar el borde:

element.style.border = '1px solid black'

Tu vistecoloryborder. Puede cambiar todas las propiedades CSS utilizando camelCase en lugar de guiones cuando el nombre de la propiedad CSS las contenga.

Una tabla de traducción está convenientemente listada enesta página MDN.


Más tutoriales de js: