Introducción a la diferencia entre el estilo, el estilo actual, getComputedStyle
Hay tres formas de diseñar hojas
Estilo en línea: está escrito en la etiqueta. El estilo en línea solo es válido para todas las etiquetas.
Hoja de estilo interno: está escrito en HTML, y el estilo interno solo es válido para la página web.
Hoja de estilo externo: si muchas páginas web necesitan usar los mismos estilos, escriba los estilos en un archivo CSS con .css como sufijo y luego haga referencia al archivo CSS en cada página web que necesita usar estos estilos. El atributo de estilo más utilizado es. En JavaScript, el valor de xxx se puede obtener a través de document.getElementById (id) .style.xxxx. Sin embargo, inesperadamente, esto solo puede obtener el valor de estilo establecido a través de métodos integrados, es decir, el valor establecido en el atributo de estilo.
Solución: ¡ Presente el estilo estándar de estilo CurrentStyle, RuntimeTyle, GetComputedStyle, que puede especificarse mediante el atributo de estilo!
RuntimeTyle ¡Estilo de tiempo de ejecución! Si se superpone con la propiedad del estilo, ¡la propiedad del estilo se sobrescribirá!
¡CurrentStyle se refiere a la combinación de estilo y runtimestyle! Puede obtener el valor del estilo CSS referenciado a través de la línea o externamente a través de CurrentStyle (es decir, solo). Por ejemplo: document.getElementById ("prueba"). CurrentStyle.top
Para ser compatible con FF, debe necesitar GetComputedStyle para hacerlo
Nota: GetComputedStyle está en Firefox, CurrentStyle está en IE. Por ejemplo
<style> #mydiv {ancho: 300px;} </ystye>pero:
var myDiv = document.getElementById ('myDiv'); if (myDiv.CurrentStyle) {var width = myDiv.currentStyle ['width']; alert ('ie:' + width);} más if (window.getComutedStyle) {var width = window.getComputedStyle (myDiv, null) ['' '»; ancho);}Además, bajo FF, también puede obtenerlo de la siguiente manera
document.defaultView.getComputedStyle (myDiv, null) .width; window.getComputedStyle (myDiv, null) .Width;
Aquí hay algunas adiciones:
Mientras leía el blog, vi a estos 3 tipos: estilo, actual Style, GetComputedStyle. No lo he encontrado cuando estudiaba antes, pero ahora lo he encontrado, así que lo he estudiado un poco. Descubrí algunos problemas, tal vez fue por la edad de tiempo, o podría deberse a mi ignorancia, pero realmente me confundió. Aunque Tao Yuanming dijo que no buscaba mucha comprensión al estudiar, como desarrollador front-end que quiere convertirse en un excelente front-end, ¡todavía necesita entenderlo, de lo contrario no podrá dormir!
Primero pongamos las bases. Hablemos de las tres formas de hojas de estilo en cascada (los tres tipos tienen nombres diferentes, según sus respectivos hábitos):
uno. Estilo en línea: Establecer con el atributo de estilo en etiquetas HTML. como:
1 <p style = "Color:#F90;"> Este es el estilo en línea </p>
dos. Estilo de incrustación: establezca la etiqueta <head> a través de la etiqueta <Syle>. como:
<style type = "text/css">/*Este es el estilo de incrustación*/.stuff {color:#F90} </style>tres. Estilo externo: Establecer a través de <link> etiqueta. como:
<link rel = "stylesheet" href = "path/style.css" type = "text/css"> ====================================================/*Estilo externo*/@Charset "Utf-8"; .stuff {color:#F90;}Se recomienda el tercer método.
Los tres protagonistas de abajo están en el campo.
La primera persona que caminó lentamente hacia nosotros fue el estilo. Se usa en obj.style.attr; Un crítico de cine comentó en su blog:
El estilo solo puede obtener el estilo en línea del elemento, y los estilos internos y externos no se pueden obtener usando el estilo.
Lo verifiqué con el siguiente código, y es como se mencionó anteriormente. Usé tres estilos y el resultado que obtuve es el valor del estilo en línea.
< xmlns = "http://www.w3.org/1999/xhtml"> <fead> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> Title titleed Document </title> <link href = "style.css" rel = "Stylesheet" type = "text/css"/> <style type = "text/css"> #stuff {width: 300px;} </style> <script type = "text/javaScript"> window.onload = function () {var odiv = document.getElementByid ('stuff'); console.log (odiv.style.width); //alert(odiv.style.width); }; </script> </head> <body> <div id = "Stuff"> </div> </body> </html>Link Stylesheet Style Style.css: CSS:
1 @CharSet "UTF-8"; 2 / * documento CSS * / 3 #stuff {ancho: 100px;}
El resultado es 400px.
El siguiente estilo es CurrentStyle, que se dice que tiene una SM de respaldo fuerte, lo que significa que este tipo solo puede usarse en el navegador IE. Otros no son buenos. Es utilizado por Window.CurrentStyle ["attr '] o window.currentstyle.attr. En IE, obtenga el valor de atributo de ancho de 300px en una hoja de estilo incrustado, que no se puede pasar en Mozilla Firefox.
El último llega a GetComputedStyle, que usa Window.getComputedStyle (OB, Pseudoleelt) ["attr '] o Window.getComputedStyle (OB, Pseudoleelt) .Attr. Entre ellos, Pseudoleelt representa un pseudoclass como: después,: antes. Si no usa un pseudoclass, establecido en Null.
El crítico de cine comentó:
GetComputedStyle Funciones lo mismo que CurrentStyle, pero es adecuado para FF, Opera, Safari y Chrome.
Con una actitud escéptica, la verifiqué nuevamente, e IE7, IE8 e IE9 todos los errores informados:
El objeto no admite el atributo o método "getComputedStyle"
Problemas de compatibilidad del navegador. El problema de compatibilidad del navegador es de hecho un dolor de cabeza para los desarrolladores frontales, especialmente el Culprit IE6. Pero no podemos tener miedo y mantenernos alejados, sino que lidiar con los movimientos, y los soldados vienen a bloquear el agua y el suelo. ¡Te divertirás mucho en la pelea con él y una sensación de logro después de derrotarlo! ! !
Otro punto: GetComputedStyle y CurrentStyle solo pueden obtener valores de atributos, pero no pueden establecer atributos. Si desea establecer el valor del atributo, use ob.style.attr.
Por favor, dame algún consejo si hay algo mal, ¡gracias de antemano! !