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 ("elemento", "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: Especial para o IE, ele retorna o valor final do atributo CSS do elemento atualmente aplicado (incluindo o arquivo CSS externo, o atributo <yoy> incorporado 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.