Maneira fácil de obter estilos de elementos em js nativos

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:

 var teste = document.getElementById ("teste"); // obtenha o teste de cores.style.color do nó;

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:

 var teste = document.getElementById ("test"), demo = window.getComputedStyle (teste, nulo); // Get the Color Demo.color do nó

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:

 var teste = document.getElementById ("teste"), demonstração = test.currentStyle; // obtenha a demonstração de cores.color do nó;

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:

 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:

 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

 função getStyle (ele) {var style = null; if (window.getComputedStyle) {style = window.getComputedStyle (ele, nulo); } else {style = ele.currentstyle; } Return Style;}

A maneira simples de obter estilos de elemento no JS nativo é todo o conteúdo que eu compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.