javascript obter exemplo de código de estilo CSS do elemento

Existem quatro maneiras de usar CSS para controlar a página: estilo embutido (estilo embutido), estilo embutido, estilo de link e estilo importado.

Os estilos embutidos (estilos embutidos) são escritos no atributo style na tag html, como <div></div>

Os estilos embutidos são escritos na tag de estilo, como <style type="text/css">div{width:100px height:100px}</style>;

O tipo de link é usar a tag de link para apresentar o arquivo css, como <link href="test.css" type="text/css" rel="stylesheet" />

O método de importação é usar import para introduzir o arquivo css, como @import url("test.css")

Se você deseja usar JavaScript para obter informações de estilo de um elemento, a primeira coisa que vem à mente deve ser o atributo de estilo do elemento. No entanto, o atributo de estilo de um elemento representa apenas o estilo embutido do elemento. Se parte das informações de estilo de um elemento for escrita no estilo embutido e parte for escrita no arquivo CSS externo, as informações de estilo completas do elemento não poderão. ser obtido através do atributo style . Portanto, você precisa usar o estilo calculado do elemento para obter as informações de estilo do elemento.

Use o método getComputedStyle do objeto window para obter o estilo calculado de um elemento. Este método possui 2 parâmetros. O primeiro parâmetro é o elemento cujo estilo calculado deve ser obtido. class (como: antes,:depois), ambos os parâmetros são obrigatórios.

Vamos dar um exemplo

<style type="texto/css">

#testDiv{

borda: 1px vermelho sólido;

largura: 100px;

altura: 100px;

cor: vermelho;

}

</estilo>

<div id="testDiv"></div>

var testDiv = document.getElementById("testDiv");

var computadoStyle = window.getComputedStyle(testDiv, "");

var largura=computedStyle.width;/100px

var altura=computedStyle.height;/100px

var cor = computadoStyle.color; //rgb(255, 0, 0)

[/código]

Nota: Os atributos de cores obtidos são todos retornados no formato rgb(#,#,#).

Neste momento, se você usar testDiv.style para obter informações de estilo, testDiv.style.width definitivamente estará vazio.

O método getComputedStyle não é implementado no IE8 e em versões anteriores, mas cada elemento no IE possui sua própria propriedade currentStyle.

Então, vamos a uma geral

Copie o código do código da seguinte forma:

var testDiv = document.getElementById("testDiv");

var styleInfo = window.getComputedStyle?window.getComputedStyle(testDiv, ""): testDiv.currentStyle;

var largura = styleInfo.width;

var altura = styleInfo.height;/100px;

var cor = styleInfo.color; // rgb(255, 0, 0)

Finalmente, observe que o estilo calculado de um elemento é somente leitura. Se você deseja definir o estilo de um elemento, você deve usar o atributo style do elemento (este é o verdadeiro propósito do atributo style do elemento). .