Propriedade de estilo HTML DOM
Exemplo
Adicione uma cor vermelha a um elemento <h1>:
document.getElementById("myH1").style.color = "red";
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
A propriedade style retorna um objeto CSSStyleDeclaration, que representa o atributo style de um elemento.
A propriedade style é usada 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 à propriedade style, por exemplo, element .style = "color: red;". Para definir o estilo de um elemento, anexe uma propriedade "CSS" ao estilo e especifique um valor, como este:
element.style.backgroundColor = "red"; // set the background color of an element to red
Como você pode ver, a sintaxe JavaScript para definir as propriedades CSS é ligeiramente diferente do CSS (backgroundColor em vez de background-color).
Para obter uma lista de todas as propriedades disponíveis, consulte nossa Referência de objeto de estilo .
Nota: A propriedade style só retorna as declarações CSS definidas no atributo inline style do elemento, por exemplo,
<p style="color: red;">. Não é possível usar esta propriedade para obter informações sobre regras de estilo da seção <head> no documento ou folhas de estilo externas.
No entanto, você pode acessar o elemento <style> de <head> usando document.getElementsByTagName():
var x = document.getElementsByTagName("STYLE")[0]; // get the first <style> element
Nota: Recomenda-se usar a propriedade style ao invés do método do elemento .setAttribute("style", "...") , pois a propriedade style não irá sobrescrever outras propriedades CSS que possam ser especificadas no atributo style.
Suporte ao navegador
| Property | |||||
|---|---|---|---|---|---|
| style | Yes | Yes | Yes | Yes | Yes |
Sintaxe
Propriedades do estilo de retorno:
element.style.property
Definir propriedades de estilo:
element.style.property = value
Valores de propriedade
| Value | Description |
|---|---|
| value |
Specifies the value of the specified property. For example, for the borderBottom property: element.style.borderBottom = "2px solid red"; |
Detalhes técnicos
| Valor de retorno: | Um objeto CSSStyleDeclaration, representando o atributo de estilo de um elemento |
|---|---|
| Versão DOM | CSS Nível 2 |
Mais exemplos
Exemplo
Obtenha o valor da borda superior de um elemento <p>:
var x = document.getElementById("myP").style.borderTop;
Páginas relacionadas
Tutorial de CSS : Tutorial de CSS
Referência CSS: Propriedades CSS
Referência HTML DOM: referência de objeto de estilo
Referência HTML: tag HTML <style>
❮ Objeto Elemento