Exemplo
Adicionar uma cor vermelha para um <h1> elemento:
document.getElementById("myH1").style.color = "red"; Antes de definir o estilo:
Hello World!
Depois de definir o estilo:
Hello World!
Tente você mesmo " Mais "Try it Yourself" exemplos abaixo.
Definição e Uso
A propriedade de estilo retorna um objeto CSSStyleDeclaration, que representa atributo de estilo de um elemento.
A propriedade estilo é usado para obter ou definir um estilo específico de um elemento usando diferentes propriedades CSS.
Nota: Não é possível definir estilos, atribuindo uma string para a propriedade de estilo, por exemplo, elemento .Style = "color: red;" . Para definir o estilo de um elemento, anexar um "CSS" propriedade para estilo e especificar um valor, como este:
element .style.backgroundColor = "red"; // set the background color of an element to red Try it
Como você pode ver, a sintaxe JavaScript para definir propriedades CSS é ligeiramente diferente do CSS (backgroundColor instead of background-color) .
Para obter uma lista de todas as propriedades disponíveis, consulte o nosso estilo de objeto de referência .
Nota: A propriedade de estilo só retorna as declarações CSS definidos no atributo de estilo em linha do elemento, por exemplo,
<P style = "color: red;">. Não é possível usar essa propriedade para obter informações sobre as regras de estilo do <head> seção no documento ou folhas de estilo externas.
No entanto, você pode acessar o <style> elemento <head> usando documento. getElementsByTagName() :
var x = document.getElementsByTagName("STYLE")[0]; // get the first
<style> element Try it
Nota: Recomenda-se usar a propriedade de estilo em vez do element . setAttribute("style", "...") método, porque a propriedade estilo não irá substituir outras propriedades CSS que podem ser especificados no style atributo.
Suporte navegador
| Propriedade | |||||
|---|---|---|---|---|---|
| style | sim | sim | sim | sim | sim |
Sintaxe
Retornar propriedades de estilo:
element .style. property Definir propriedades de estilo:
element .style. property = value Valores de propriedade
| Valor | Descrição |
|---|---|
| value | Especifica o valor da propriedade especificada. Por exemplo, para a propriedade borderBottom: elemento .style.borderBottom = "vermelho sólido 2px"; |
Detalhes técnicos
| Valor de retorno: | Um objeto CSSStyleDeclaration, representando atributo de estilo de um elemento |
|---|---|
| DOM Versão | Dom Nível 2 CSS |
mais Exemplos
Exemplo
Obter o valor de um <p> top-fronteira elemento de:
var x = document.getElementById("myP").style.borderTop;O resultado x será:
5px solid red Tente você mesmo " Páginas relacionadas
Tutorial CSS: CSS Tutorial
CSS Referência: Propriedades de CSS
HTML DOM Referência: Estilo Object Reference
: Referência HTML HTML <style> tag
<Elemento de objeto