Obter estilos de elementos usando javascript nativo é apenas uma maneira de obtê -los

PS: É para obter o estilo, não para definir o estilo. Se nenhum valor de estilo estiver definido para o elemento, o valor padrão fornecido pelo navegador será retornado. (Fórum classificado)

1. Element.Style: Somente o valor de estilo escrito no atributo de estilo na tag elemento não pode ser obtido. O atributo de estilo definido em <style> </style> e carregado através de <link href = "css.css"> não pode ser obtido.

A cópia do código é a seguinte:

var ele = document.getElementById ('ele');

ele.style.color; // Obtenha cores

2. Window.GetComputedStyle (): Ele pode obter todos os valores finais de atributo CSS do elemento atual.

A cópia do código é a seguinte:

window.getComputedStyle ("Element", "pseudo-classe");

Este método aceita dois parâmetros: para obter o elemento do estilo computado e uma string pseudo-elemento (por exemplo ": antes"). Se as informações de pseudo-elementos não forem necessárias, o segundo parâmetro poderá ser nulo. Ele também pode ser usado via document.defaultView.getComputedStyle ("elemento", "pseudo-classe");

A cópia do código é a seguinte:

var ele = document.getElementById ('ele');

var styles = window.getComputedStyle (ele, nulo);

styles.color; // Obtenha cores

Você pode usar o style.length para visualizar o número de estilos padrão do navegador. O IE6-8 não suporta esse método e o método a seguir precisa ser usado. Para Firefox e Safari, a cor será convertida em formato RGB.

3. Element.CurrentStyle: IE é dedicado, que retorna o valor final do atributo CSS do elemento atualmente aplicado (incluindo arquivos CSS de link externo, atributos <estilo> incorporados na página, etc.).

A cópia do código é a seguinte:

var ele = document.getElementById ('ele');

var styles = ele.currentStyle;

styles.color;

Nota: Para uma fronteira abrangente de atributo, etc., ou seja, retorna indefinido. Alguns outros navegadores retornam valores e outros não retornam, mas atributos como os valores de retorno da lareira da lareira.

4. GetPropertyValue (): Obtenha o nome da propriedade direta do estilo CSS

A cópia do código é a seguinte:

var ele = document.getElementById ('ele');

window.getComputedStyle (ele, null) .getPropertyValue ('cor');

Nota: o nome do atributo não suporta formato de camelo, o IE6-8 não suporta esse método; portanto, o seguinte método é necessário

5. getattribute (): semelhante ao getPropertyValue, uma diferença é o formato de camelo do nome da propriedade

A cópia do código é a seguinte:

var teste = document.getElementById ('teste');

window.getComputedStyle (teste, null) .getPropertyValue ("BackgroundColor");

Nota: Este método suporta apenas o IE6-8.

O método de obtenção de estilo a seguir é compatível com IE, Chrome, Firefox, etc.

A cópia do código é a seguinte:

função getStyle (ele) {

var estilo = nulo;

if (window.getComputedStyle) {

style = window.getComputedStyle (ele, nulo);

}outro{

estilo = ele.currentstyle;

}

estilo de retorno;

}

No jQuery, o CSS () é comumente usado para obter propriedades de estilo, e sua operação subjacente aplica os métodos GetComputedStyle e GetPropertyValue.