Propriedade style do elemento HTML DOM

Definição e uso

style A propriedade retorna o valor do estilo do elemento, como objeto CSSStyleDeclaration.

O objeto CSSStyleDeclaration contém todas as propriedades de estilo inline do elemento. Ele não contém nas <head> qualquer propriedade de estilo definida em parte ou em qualquer tabela de estilos externa.

Ponto 1

Você não pode definir um estilo como esse:

element.style = "color:red";

Você deve usar essa propriedade CSS:

element.style.backgroundColor = "red";

Experimente você mesmo

Ponto 2

A sintaxe do JavaScript é ligeiramente diferente da sintaxe do CSS:

backgroundColor / background-color

Veja nosso Manual completo do objeto Style.

Ponto 3

Use essa propriedade style, em vez de Método setAttribute()para evitar que outros atributos do estilo sejam sobreescritos.

Veja também:

Tutorial de CSS

Manual de referência do CSS

Objeto Style

Tag <style> do HTML

Exemplo

Exemplo 1

Mudar a cor de "myH1":

document.getElementById("myH1").style.color = "red";

Experimente você mesmo

Exemplo 2

Obter o valor da borda superior de "myP":

let value = document.getElementById("myP").style.borderTop;

Experimente você mesmo

Sintaxe

Retornar a propriedade style:

element.style.property

Definir a propriedade style:

element.style.property = value

Valor da propriedade

Valor Descrição
value

Especificar o valor da propriedade.

Por exemplo:

element.style.borderBottom = "2px solid red"

Retorno

Tipo Descrição
Objeto O objeto CSSStyleDeclaration do elemento.

Suporte do navegador

element.style é uma característica do DOM Level 2 (2001).

Todos os navegadores suportam completamente isso:

Chrome IE Edge Firefox Safari Ópera
Chrome IE Edge Firefox Safari Ópera
Suporte 9-11 Suporte Suporte Suporte Suporte