English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
styledefinir ou retornar a propriedade de estilo inline do elemento.
Ele retorna umCSSStyleDeclarationobjeto, que contém a lista de todas as propriedades de estilo do elemento e atribui valores às propriedades definidas nas propriedades de estilo inline do elemento.
Retornar propriedade de estilo:
element.style.property
Definir propriedade de estilo:
element.style.property = value
document.getElementById("demo").style.color = "blue";Teste e Veja‹/›Atenção:Não é possível definir o estilo atribuindo uma string à propriedade style, por exemploelement.style="color: blue;". Para definir o estilo do elemento, adicione um atributo "CSS" ao estilo e especifique um valor, conforme mostrado:
element.style.backgroundColor="blue"; //Definir a cor de fundo do elemento como azul
Como você vê, a sintaxe do JavaScript usada para definir propriedades CSS é semelhante ao CSS (backgroundColor em vez de background-color) é um pouco diferente.
Para uma lista de todas as propriedades disponíveis, consultereferência do objeto de estilo.
A propriedade style não é útil para entender completamente o estilo aplicado ao elemento, pois ela representa apenas as declarações CSS definidas nas propriedades de estilo inline do elemento, e não as declarações CSS de regras de estilo de outros lugares (por exemplo, as regras de estilo neste capítulo) ou tabelas de estilos externos. Para obter os valores de todas as propriedades CSS do elemento, deve-se usarwindow.getComputedStyle().
Mas, pode-se usar document.getElementsByTagName() para acessar o elemento <style> do <head>:
var x = document.getElementsByTagName("style")[0]; //Obter o primeiro elemento <style>
Atenção:Recomenda-se usar a propriedade style em vez deElemento .setAttribute("style", "...")método, porque a propriedade style não cobre outras propriedades CSS que possam estar especificadas no estilo (por exemplo, as regras de estilo neste capítulo) ou tabelas de estilos externas.
Todos os navegadores suportam completamente a propriedade style:
| propriedade | |||||
| style | é | é | é | é | é |
| valor | descrição |
|---|---|
| value | Especificar o valor da propriedade. Por exemplo, para a propriedade border: element.style.border="5px azul puro"; |
| Retorno: | UmCSSStyleDeclarationObjeto que representa a propriedade style do elemento |
|---|---|
| Versão DOM: | Modelo de Objetos CSS (CSSOM) |
Obter valor superior do elemento <p>:
var x = document.getElementById("demo").style.borderTop;Teste e Veja‹/›UsarElemento Método .setAttribute() define estilo CSS:
var div = document.querySelector("#myDiv");
div.setAttribute("style", "cor:red; borda: 1px sólido azul;");Teste e Veja‹/›Tutorial CSS:Tutorial CSS
Referência CSS:大全 de Atributos CSS
Referência HTML:Atributos de Estilo do HTML
Referência HTML:Marca <style> do HTML