Ejemplo
Añadir un color rojo a un <h1> elemento:
document.getElementById("myH1").style.color = "red"; Antes de seleccionar el estilo:
Hello World!
Después de seleccionar el estilo:
Hello World!
Inténtalo tú mismo " Más "Try it Yourself" ejemplos a continuación.
Definición y Uso
La propiedad de estilo devuelve un objeto CSSStyleDeclaration, lo que representa atributo de estilo de un elemento.
La propiedad de estilo se utiliza para obtener o establecer un estilo específico de un elemento utilizando diferentes propiedades CSS.
Nota: No es posible establecer estilos asignando una cadena a la propiedad de estilo, por ejemplo, el elemento .style = "color: red;" . Para definir el estilo de un elemento, añadir una "CSS" propiedad de estilo y especificar un valor, como este:
element .style.backgroundColor = "red"; // set the background color of an element to red Try it
Como se puede ver, la sintaxis JavaScript para establecer las propiedades de CSS es ligeramente diferente a la CSS (backgroundColor instead of background-color) .
Para obtener una lista de todas las propiedades disponibles, ver nuestra referencia Estilo de objeto .
Nota: La propiedad de estilo sólo devuelve las declaraciones CSS establecidos 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 acerca de las reglas de estilo de la <head> sección en el documento o las hojas de estilo externas.
Sin embargo, se puede acceder al <style> elemento de <head> mediante el uso de documento. getElementsByTagName() :
var x = document.getElementsByTagName("STYLE")[0]; // get the first
<style> element Try it
Nota: Se recomienda el uso de la propiedad de estilo en lugar del element . setAttribute("style", "...") método, ya que la propiedad estilo no se sobreponen a otras propiedades CSS que pueden especificarse en el style atributo.
Soporte del navegador
| Propiedad | |||||
|---|---|---|---|---|---|
| style | Sí | Sí | Sí | Sí | Sí |
Sintaxis
Devolver las propiedades de estilo:
element .style. property Definir propiedades de estilo:
element .style. property = value Valores de propiedad
| Valor | Descripción |
|---|---|
| value | Especifica el valor de la propiedad especificada. Por ejemplo, para la propiedad BorderBottom: elemento .style.borderBottom = "red sólido 2px"; |
Detalles técnicos
| Valor de retorno: | Un objeto CSSStyleDeclaration, representando atributo de estilo de un elemento |
|---|---|
| Versión DOM | DOM Nivel 2 CSS |
Más ejemplos
Ejemplo
Obtener el valor de un <p> top-border de elemento:
var x = document.getElementById("myP").style.borderTop;El resultado de x será:
5px solid red Inténtalo tú mismo " Páginas relacionadas
Tutorial CSS: CSS Tutorial
CSS Referencia: Propiedades de CSS
HTML DOM Referencia: Estilo de referencia de objetos
: Referencia HTML HTML <style> etiqueta
<Elemento de objeto