Código básico:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> document </title> <style> div {cor: amarelo; } </style> </head> <body> <div> Isso é div </div> </body> </html>1. Obtenha -o usando o atributo element.style
<Cript> var div = document.getElementsByTagName ("div") [0]; console.log (div.style.color); // "" console.log (div.style.backgroundColor); // vermelho </sCript>O atributo element.style só pode obter estilos embutidos, não pode obter estilos na tag <style>, nem pode obter estilos externos.
Como elemento.style é um atributo de um elemento, podemos reatribuir o atributo para substituir a exibição do elemento.
<Cript> var div = document.getElementsByTagName ("div") [0]; Div.style ['Background-color'] = "verde"; console.log (div.style.backgroundColor); // verde </sCript>2. Obtenha estilos através do getComputedStyle e CurrentStyle
O ambiente de uso do getComputedStyle é Chrome/Safari/Firefox IE 9,10,11
<Cript> var div = document.getElementsByTagName ("div") [0]; var styleobj = window.getComputedStyle (div, null); console.log (styleobj.backgroundColor); // vermelho console.log (styleobj.color); // amarelo </sCript>CurrentStyle pode ser perfeitamente suportado no IE, o Chrome não suporta, FF não suporta
<Cript> var div = document.getElementsByTagName ("div") [0]; var styleobj = div.currentStyle; console.log (styleobj.backgroundColor); // vermelho console.log (styleobj.color); // amarelo </sCript>3. A diferença entre ele.style e getcomputedstyle ou CurrentStyle
3.1Ele.style é leitura, enquanto getComputedstyle e CurrentStyle são somente leitura
3.2 Ele.style pode apenas colocar o estilo CSS na propriedade Style na linha, e o GetComputedStyle e o CurrentStyle também podem obter outros valores padrão.
3.3 O que ele.style obtém o estilo no atributo de estilo, não necessariamente o estilo final, enquanto os outros dois recebem o estilo CSS final do elemento
4. Obtenha escrita de compatibilidade de estilo
<Script> // Obtenha o estilo não line (o estilo na tag de estilo ou o estilo no arquivo CSS Link), OBJ é o elemento, o att é a função de nome do estilo getStyle (obj, att) {// para ie if (obj.currentSyle) {return obj.currentstyle [att]; // porque o atribuído passado pela função é uma string, você deve usar [] para obter o valor} else {// para o Window.getComputedStyle (obj, false) [att]; }} /* Obtenha ou defina o atributo CSS* / função css (obj, att, value) {if (argumentos.length == 2) {return getStyle (obj, att); } else {obj.style [att] = value; }} </script>5.Window.getComputedStyle (ele [, pseudoelt]);
Se o segundo parâmetro for nulo ou omitido, obtenha o objeto CSSSTYLEDECLARATION que é ele
Se for uma pseudo-classe, o objeto cssstyleleDeclaration da pseudo-classe é obtido
<estilo> div {width: 200px; Altura: 200px; Background-Color:#fc9; Size da fonte: 20px; Alinhamento de texto: centro; } div: após {content: "Isso é depois"; exibição: bloco; Largura: 100px; Altura: 100px; Background-Color:#f93; margem: 0 automático; altura da linha: 50px; } </style> <body> <div id = 'mydiv'> isso é div </div> <insput id =' btn 'type = "button" value =' getStyle '/> <cript> var btn = document.QuerySelector ('#btn '); btn.OnClick = function () {var div = document.QuerySelector ('#myDiv'); var styleobj = window.getComputedStyle (div, 'depois'); console.log (styleobj ['width']); } </script> </body>6.GetPropertyValue Obtém o valor da propriedade especificado no objeto CSSSTYLEDECLARATION
<Cript> var div = document.getElementsByTagName ("div") [0]; var styleobj = window.getComputedStyle (div, null); console.log (styleobj.getPropertyValue ("colorido de fundo"); </script>PropertyName em getPropertyValue (PropertyName); não pode ser uma expressão de camelo
obj.currentstyle ['margem-left'] funciona
obj.currentstyle ['marginleft'] funciona
window.getComputedStyle (obj, null) ['margem-left'] funciona
window.getComputedStyle (obj, null) ['marginleft'] funciona
window.getComputedStyle (obj, null) .getPropertyValue ('margem-esquerda') válido
window.getComputedStyle (obj, null) .getPropertyValue ('marginleft') inválido
obj.currentStyle.width é válido
obj.currentstyle.background-color inválido
obj.currentstyle.backgroundColor Works
window.getComputedStyle (OBJ, nulo) .Width Válido
window.getComputedStyle (obj, null) .background-cor inválido
Window.GetComputedStyle (obj, null) .BackgroundColor Works
Em resumo, o atributo com "-" não pode ser apontado diretamente, portanto, existe um método getPropertyValue para lidar com isso, mas [] pode ser usado para substituir o getPropertyValue.
7.DefaultView
Em muitos códigos de demonstração on -line, o GetComputedStyle é chamado através do objeto Document.DefaultView. Na maioria dos casos, isso não é necessário, pois pode ser chamado diretamente através do objeto da janela. Mas há uma situação em que você precisa usar o DefaultView, que é acessar os estilos dentro do sub -quadro no Firefox3.6 (iframe)
O método de implementação simples acima para obter estilos (recomendado) de JS é todo o conteúdo que compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.