Introdução à diferença entre Style, CurrentStyle, GetComputedStyle
Existem três maneiras de estilizar folhas
Estilo embutido: está escrito na tag. O estilo embutido é válido apenas para todas as tags.
Folha de estilo interno: está escrito no HTML e o estilo interno é válido apenas para a página da web.
Folha de estilo externo: se muitas páginas da web precisarem usar os mesmos estilos, escreva os estilos em um arquivo CSS com .css que o sufixo e, em seguida, faça referência ao arquivo CSS em cada página da Web que precisa usar esses estilos. O atributo de estilo mais usado é. No JavaScript, o valor de xxx pode ser obtido através do document.getElementById (id) .style.xxxx. No entanto, inesperadamente, isso só pode obter o valor de estilo definido através de métodos incorporados, ou seja, o valor definido no atributo de estilo.
Solução: Apresente o estilo padrão, o estilo RunTimestyle, o estilo GetComputedStyle Style Style, que pode ser especificado pelo atributo de estilo!
RUNTIMESTILELE RUNTIME DO ESTILO! Se se sobrepor à propriedade do estilo, a propriedade do estilo será substituída!
CurrentStyle refere -se à combinação de estilo e RunTimestyle! Você pode obter o valor do estilo CSS referenciado através de embutido ou externamente através do estilo atual (apenas por exemplo). Por exemplo: document.getElementById ("teste"). CurrentStyle.top
Para ser compatível com FF, você precisa precisar
Nota: GetComputedStyle está no Firefox, o CurrentStyle está no ie. Por exemplo
<Style> #mydiv {width: 300px;} </style>mas:
var mydiv = document.getElementById ('mydiv'); if (mydiv.currentStyle) {var width = mydiv.currentStyle ['width']; alert ('ie:' + width);} else if (window.getComstyle) {var width = wailth); nulo) ['largura']; Alert ('Firefox:' + Width);}Além disso, em FF, você também pode obtê -lo da seguinte maneira
document.defaultView.getComputedStyle (mydiv, null) .width; window.getComputedStyle (mydiv, null) .width;
Aqui estão algumas adições:
Enquanto lia o blog, vi esses 3 caras - estilo, CurrentStyle, GetComputedStyle. Eu não encontrei quando estava estudando antes, mas agora o encontrei, então estudei um pouco. Descobri alguns problemas, talvez fosse por causa da idade do tempo, ou pode ser por causa da minha ignorância, mas isso realmente me confundiu. Embora Tao Yuanming tenha dito que não procurou muito entendimento ao estudar, como desenvolvedor de front-end que quer se tornar um excelente front-end, ele ainda precisa entendê-lo, caso contrário, não será capaz de dormir!
Vamos colocar as bases primeiro. Vamos falar sobre as três formas de folhas de estilo em cascata (os três tipos têm nomes diferentes, de acordo com seus respectivos hábitos):
um. Estilo embutido: defina com o atributo de estilo em tags HTML. como:
1 <p style = "cor:#f90;"> Este é o estilo em linha </p>
dois. Estilo de incorporação: defina a tag <ad Head> através da tag <yoy>. como:
<style type = "text/css">/*Este é o estilo incorporado*/.stuff {color:#f90} </style>três. Estilo externo: definido via tag <ink>. como:
<link rel = "Stylesheet" href = "path/style.css" type = "text/css"> ==================================================/*External Style*/ @ @ @ @ .stuff {color:#f90;}O terceiro método é recomendado.
Os três protagonistas abaixo estão em campo.
A primeira pessoa que caminhou lentamente em nossa direção foi o estilo. É usado em obj.style.attr; Um crítico de cinema comentou em seu blog:
O estilo só pode obter o estilo embutido do elemento, e os estilos interno e externo não podem ser obtidos usando o estilo.
Eu o verifiquei com o código a seguir, e é de fato como mencionado acima. Usei três estilos e o resultado que obtive é o valor do estilo embutido.
<! xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> unt titisned </title> <link "href = systys =" type = "text/css"/> <style type = "text/css"> #stuff {width: 300px;} </style> <script type = "text/javascript"> window.onload = function () {var odiv = document.getElementById ('StuffIl'); console.log (odiv.style.width); //alert(odiv.style.width); }; </script> </ad Head> <body> <div id = "stuff"> </div> </body> </html>Estilo de link externo style.css:
1 @Charset "UTF-8"; 2 / * documento CSS * / 3 #stuff {width: 100px;}
O resultado é 400px.
O estilo seguinte é o CurrentStyle, que se diz ter um forte MS de apoio, o que significa que esse cara só pode ser usado no navegador do IE. Outros não são bons. É usado por window.currentStyle ["att '] ou window.currentstyle.attr. No IE, obtenha o valor de atributo de largura de 300px na folha de estilo incorporada, que não pode ser passada no Mozilla Firefox.
O último chega ao getcomputedStyle, que usa window.getComputedStyle (ob, pseudoelt) ["att '] ou window.getComputedstyle (ob, pseudoelt) .attr.
O crítico de cinema comentou:
O GetComputedStyle funciona o mesmo que o CurrentStyle, mas é adequado para FF, Opera, Safari e Chrome.
Com uma atitude cética, verifiquei -a novamente, e IE7, IE8 e IE9 todos relataram erros:
O objeto não suporta o atributo ou método "getcomputedstyle"
Problemas de compatibilidade do navegador. A questão da compatibilidade do navegador é realmente uma dor de cabeça para os desenvolvedores de front-end, especialmente o IE6 culpado. Mas não podemos ter medo e ficar longe disso, mas lidar com os movimentos, e os soldados vêm para bloquear a água e o solo. Você se divertirá muito na luta e uma sensação de realização depois de derrotá -lo! ! !
Outro ponto: GetComputedStyle e CurrentStyle podem obter apenas valores de atributo, mas não podem definir atributos. Se você deseja definir o valor do atributo, use ob.style.attr.
Por favor, me dê alguns conselhos se houver algo errado, obrigado antecipadamente! !