Propiedad de estilo HTML DOM
Ejemplo
Agregue un color rojo a un elemento <h1>:
document.getElementById("myH1").style.color = "red";
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La propiedad de estilo devuelve un objeto CSSStyleDeclaration, que representa el atributo de estilo de un elemento.
La propiedad de estilo se usa para obtener o establecer un estilo específico de un elemento usando diferentes propiedades CSS.
Nota: No es posible establecer estilos asignando una cadena a la propiedad de estilo, por ejemplo, elemento .estilo = "color: rojo;". Para establecer el estilo de un elemento, agregue una propiedad "CSS" al estilo y especifique un valor, como este:
element.style.backgroundColor = "red"; // set the background color of an element to red
Como puede ver, la sintaxis de JavaScript para configurar las propiedades de CSS es ligeramente diferente a la de CSS (backgroundColor en lugar de background-color).
Para obtener una lista de todas las propiedades disponibles, consulte nuestra Referencia de objetos de estilo .
Nota: la propiedad de estilo solo devuelve las declaraciones CSS establecidas en el atributo de estilo en línea del elemento, por ejemplo,
<p style="color: red;">. No es posible utilizar esta propiedad para obtener información sobre las reglas de estilo de la sección <head> del documento o de las hojas de estilo externas.
Sin embargo, puede acceder al elemento <style> desde <head> usando document.getElementsByTagName():
var x = document.getElementsByTagName("STYLE")[0]; // get the first <style> element
Nota: Se recomienda utilizar la propiedad de estilo en lugar del método del elemento .setAttribute("estilo", "...") , ya que la propiedad de estilo no sobrescribirá otras propiedades CSS que puedan especificarse en el atributo de estilo.
Compatibilidad con navegador
| Property | |||||
|---|---|---|---|---|---|
| style | Yes | Yes | Yes | Yes | Yes |
Sintaxis
Propiedades de estilo de retorno:
element.style.property
Establecer propiedades de estilo:
element.style.property = value
Valores de propiedad
| Value | Description |
|---|---|
| value |
Specifies the value of the specified property. For example, for the borderBottom property: element.style.borderBottom = "2px solid red"; |
Detalles técnicos
| Valor de retorno: | Un objeto CSSStyleDeclaration, que representa el atributo de estilo de un elemento. |
|---|---|
| Versión DOM | Dom Nivel 2 CSS |
Más ejemplos
Ejemplo
Obtenga el valor del borde superior de un elemento <p>:
var x = document.getElementById("myP").style.borderTop;
páginas relacionadas
Tutorial de CSS: Tutorial de CSS
Referencia CSS: Propiedades CSS
Referencia HTML DOM: Referencia de objeto de estilo
Referencia HTML: etiqueta HTML <estilo>
❮ Objeto Elemento