Método JavaScript para obter o valor do atributo CSS: GetComputedStyle e CurrentStyle
1. Para o estilo CSS em linha do elemento (<div style = "cor:#369"> hello </div>), você pode usar diretamente o element.style.color para obter diretamente o valor do atributo CSS;
2. No entanto, é impossível obter os estilos CSS definidos externamente. Além disso, os métodos usados pelo navegador do IE são diferentes de outros navegadores padrão (Firefox, Chrome, Opera, Safari). O navegador do IE usa o elemento.CurrentStyle e o W3C Standard Browser usa getComputedStyle para obter.
1. IE recebe o valor do atributo CSS definido externamente no elemento: elemento.CurrentStyle
O objeto CurrentStyle retorna a folha de estilo no elemento, mas o objeto de estilo retorna apenas o estilo incorporado aplicado ao elemento através do atributo de tag de estilo.
Portanto, o valor de estilo obtido através do objeto CurrentStyle pode ser diferente do valor de estilo obtido através do objeto de estilo.
Por exemplo, se o valor da propriedade colorida do parágrafo estiver definido como vermelho (vermelho) através de um link ou folha de estilo incorporado em vez de incorporado, o objeto .CurrentStyle.Color retornará a cor correta e o estilo do objeto.Color não pode retornar o valor. No entanto, se o usuário especificar <p style = "cor: 'vermelho'">, os objetos atuais e de estilo retornarão o valor vermelho.
O objeto CurrentStyle reflete a prioridade do estilo na folha de estilo. Em HTML, esta ordem é:
1) estilo embutido
2) Regras da folha de estilo
3) Atributos de tag html
4) Definição interna de tags html
2. W3C obtém o valor do atributo CSS definido externamente: window.getComputedStyle (elemento, pseudoelt)
Elemento necessário, elemento html
O pseudoelel é necessário para obter o estilo pseudo-classe do elemento
A cópia do código é a seguinte:
função getStyle (nó, propriedade) {
if (node.style [propriedade]) {
retornar node.style [propriedade];
}
else if (node.currentStyle) {
retornar node.currentStyle [Propriedade];
}
else if (document.defaultView && document.defaultView.getComputedStyle) {
var style = document.defaultView.getComputedStyle (nó, nulo);
Return style.getPropertyValue (Propriedade);
}
retornar nulo;
}