resumo:
Durante o processo de desenvolvimento, geralmente encontramos o estilo dos elementos DOM através do JS. Existem muitos métodos, como: alterando a classe de elementos DOM. Agora discutimos JS nativo para obter o estilo CSS dos elementos DOM, observe que não é uma configuração
Antes de começar, vamos primeiro falar sobre obter todos os objetos de atributo CSS que são finalmente aplicados ao elemento. Se nenhum estilo estiver definido para o elemento, o estilo padrão do navegador será retornado.
1.ele.style
Ao aprender o DOM, vejo que os valores do estilo de elemento são obtidos através do Ele.style, mas às vezes o que recebo não é os valores de estilo do nó, mas o valor vazio. Isso ocorre porque ele.style só pode obter o valor de estilo escrito no atributo de estilo na tag de elemento e não pode obter os atributos de estilo definidos em <style> </style> e carregados através de <link href = "css.css">
exemplo:
A cópia do código é a seguinte:
var teste = document.getElementById ("teste");
// Obtenha a cor do nó
test.style.color;
2. GetComputedStyle ()
GetComputedStyle é um valor de atributo CSS que pode obter todos os valores de atributo CSS usados para o final do elemento atual.
A sintaxe é 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");
exemplo:
A cópia do código é a seguinte:
var teste = document.getElementById ("teste"),
Demo = window.getComputedStyle (teste, nulo);
// Obtenha a cor do nó
Demo.Color
NOTA: O Firefox e o Safari converterão cores em formato RGB. Se não houver estilo no nó de teste, use Style.length para visualizar o número de estilos padrão do navegador. IE6-8 não suporta esse método, o seguinte método é necessário
3. Ele.CurrentStyle
CurrentStyle é um atributo do próprio navegador do IE. Sua sintaxe é semelhante ao ele.style. A diferença é que o elemento.CurrentStyle retorna o valor final do atributo CSS do elemento atualmente aplicado (incluindo o arquivo CSS de link externo, o atributo <yoy> incorporado na página, etc.).
gramática:
var estilo = dom.currentStyle;
exemplo:
A cópia do código é a seguinte:
var teste = document.getElementById ("teste"),
Demo = test.currentStyle;
// Obtenha a cor do nó
Demo.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 ()
getPropertyValue recebe o nome da propriedade direta do estilo CSS
A sintaxe é a seguinte:
window.getComputedStyle (elemento, null) .getPropertyValue (propriedade)
exemplo:
A cópia do código é a seguinte:
var teste = document.getElementById ('teste');
window.getComputedStyle (teste, null) .getPropertyValue ("cor de fundo");
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
getAttribute é semelhante ao getPropertyValue, uma diferença é o formato de camelo do nome da propriedade
exemplo:
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 IE6-8
resumo:
O método JQuery CSS (), a operação subjacente usa os métodos getComputedStyle e GetPropertyValue. Quando usamos o desenvolvimento nativo de JS, podemos obter o valor do elemento através dos métodos acima.
A seguir, é apresentado um método compatível com o IE, Firefox, Chrome e outros navegadores para obter estilos de elementos, que podem ser aplicados ao projeto
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;
}