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.