Introducción a la propiedad de estilo HTML DOM en JavaScript

El style propiedad se utiliza para obtener y establecer el en línea estilo de un elemento DOM usando diferentes propiedades CSS. Devuelve un CSSStyleDeclaration objeto, que contiene una lista de todas las propiedades CSS definidas en el style del elemento atributo.

El style propiedad es extremadamente útil para dinámicamente cambiar la representación visual de un elemento HTML utilizando JavaScript. Puede configurar casi todos los estilos para los elementos, como colores, fuentes, alineaciones de texto, márgenes, bordes, imágenes de fondo, tamaños y más. Los estilos en línea se aplican directamente al elemento HTML usando el style atributo sin ningún efecto sobre los elementos adyacentes.

Sintaxis

Para acceder al style propiedad, puede usar el getElementById() método como se muestra a continuación:

const elem = document.getElementById('sidebar');
 
// get CSS property
console.log(elem.style.display);

// set CSS property
elem.style.display = 'block';

Eche un vistazo a esta guía para conocer los diferentes métodos para acceder a los elementos DOM en JavaScript.

Ejemplos

El siguiente ejemplo muestra cómo cambiar el color y fuente Propiedades CSS de un elemento HTML con id="about" usando el style propiedad:

const elem = document.getElementById('about');
 
// change text color to blue
elem.style.color= 'blue';

// change fonts
elem.style.fontWeight = 'bold';
elem.style.fontSize = '18px';

El código anterior cambiará el color del texto del elemento HTML a azul, lo pondrá en negrita y establecerá el tamaño de fuente en 18px .

Puedes no establezca una propiedad CSS asignando una cadena directamente a la propiedad de estilo:

// set property directly (wrong)
elem.style = 'color: blue'; 

El style la propiedad es solo lectura , como el style el atributo devuelve un CSSStyleDeclaration de solo lectura objeto. En su lugar, puede utilizar el style property para establecer u obtener la propiedad CSS individual. Preferiblemente, debe usar el style propiedad para establecer estilos específicos en un elemento HTML sin cambiar otros valores de estilo.

Para anular completamente los estilos en línea existentes para un elemento, el style propiedad proporciona el cssText atributo:

elem.style.cssText = 'color: blue; font-weight: bold; font-size: 18px';

Alternativamente, puede usar el elemento setProperty() método para especificar style valor del atributo:

elem.setAttribute('style', 'color: blue; font-weight: bold; font-size: 18px');

Echa un vistazo a esta guía para descubrir todas las propiedades CSS accesibles usando el style propiedad.

Convenciones de nomenclatura

Como puede ver arriba, la forma de JavaScript de configurar las propiedades de CSS es ligeramente diferente a la de CSS. Muchas propiedades CSS contienen guión (- ) en sus nombres como font-weight , font-size , text-align , etc. Dado que el guión es un operador reservado y se interpreta como un signo menos en JavaScript, es imposible usar un guión en la expresión .p.e. elem.style.font-size='12px' .

Por lo tanto, en JavaScript, los nombres de las propiedades CSS están en mayúsculas y minúsculas. Los guiones se eliminan y la letra inmediata después de cada guión se escribe en mayúscula. Por ejemplo, la propiedad CSS font-size se convierte en la propiedad DOM fontSize , background-color se convierte en backgroundColor , border-left-color se convierte en borderLeftColor , y así sucesivamente.