Introduction à la différence entre le style, CurrentStyle, GetCompuledStyle
Il y a trois façons de coiffer les feuilles
Style en ligne: il est écrit dans la balise. Le style en ligne n'est valable que pour toutes les balises.
Fiche de style interne: il est écrit en HTML, et le style interne n'est valable que pour la page Web.
Fiche de style externe: si de nombreuses pages Web doivent utiliser les mêmes styles, écrivez les styles dans un fichier CSS avec .CSS que le suffixe, puis référez le fichier CSS dans chaque page Web qui doit utiliser ces styles. L'attribut de style le plus utilisé est. Dans JavaScript, la valeur de xxx peut être obtenue via document.getElementByid (id) .style.xxxx. Cependant, de manière inattendue, cela ne peut obtenir la valeur de style définie que par des méthodes embarquées, c'est-à-dire la valeur définie dans l'attribut de style.
Solution: Présentez le style standard de style CurrentStyle, Runtimestyle, GetComputedStyle, qui peut être spécifié par l'attribut de style!
Runtimestyle Runtime Style! S'il chevauche la propriété du style, la propriété du style sera écrasée!
Current Style fait référence à la combinaison de style et de runtimestyle! Vous pouvez obtenir la valeur du style CSS référencé via en ligne ou en externe via CurrentStyle (c'est-à-dire uniquement). Par exemple: document.getElementById ("test"). CurrentStyle.top
Pour être compatible avec FF, vous devez avoir besoin d'être compliqué pour le faire
Remarque: GetCompuledStyle est dans Firefox, CurrentStyle est dans IE. Par exemple
<style> #mydiv {width: 300px;} </ style>mais:
var mydiv = document.getElementById ('myDiv'); if (myDiv.currentStyle) {var width = myDiv.currentStyle ['width']; alert ('ie:' + width);} else if (window.getComputedStyle) {var width = window.getComputedStyle (MyDiv, null) ['largeur']; alert ('firefox:' + largeur);}De plus, sous FF, vous pouvez également l'obtenir de la manière suivante
document.defaultView.getCompuledStyle (MyDiv, null) .Width; window.getCompuledStyle (MyDiv, null) .Width;
Voici quelques ajouts:
En lisant le blog, j'ai vu ces 3 gars - style, actuelstyle, GetCompuledStyle. Je ne l'ai pas rencontré quand j'étudiais auparavant, mais maintenant je l'ai rencontré, alors je l'ai étudié pendant un peu. J'ai découvert quelques problèmes, c'était peut-être à cause de l'âge du temps, ou cela pourrait être à cause de mon ignorance, mais cela m'a vraiment confondu. Bien que Tao Yuanming ait déclaré qu'il n'avait pas cherché beaucoup de compréhension lors de l'étude, en tant que développeur frontal qui voulait devenir un excellent front-end, il doit encore le comprendre, sinon il ne pourra pas dormir!
Jetons d'abord les bases. Parlons des trois formes de feuilles de style en cascade (les trois types ont des noms différents, selon leurs habitudes respectives):
un. Style en ligne: Définissez avec l'attribut de style dans les balises HTML. comme:
1 <p style = "Color: # f90;"> Ceci est le style en ligne </p>
deux. Style d'intégration: Définissez la balise <A-Head> via la balise <ystyle>. comme:
<style type = "Text / CSS"> / * Ceci est le style intégré * / .Stuff {Color: # f90} </ style>trois. Style externe: Définissez via <ink> TAG. comme:
<link rel = "Stylesheet" href = "path / style.css" type = "text / css"> ============================================== / * Style externe * / @charset "UTF-8"; .Stuff {couleur: # f90;}La troisième méthode est recommandée.
Les trois protagonistes ci-dessous sont sur le terrain.
La première personne qui a marché lentement vers nous était le style. Il est utilisé dans obj.style.attr; Un critique de cinéma a commenté son blog:
Le style ne peut obtenir que le style en ligne de l'élément, et les styles intérieurs et extérieurs ne peuvent pas être obtenus en utilisant le style.
Je l'ai vérifié avec le code suivant, et il est en effet comme mentionné ci-dessus. J'ai utilisé trois styles et le résultat que j'ai obtenu est la valeur du style en ligne.
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <éadf> <méta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <title> storled document </tapie> <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); }; </cript> </ head> <body> <div id = "Stuff"> </div> </ body> </html>Style de feuille de style lien externe.css:
1 @Charset "UTF-8"; 2 / * Document CSS * / 3 #Stuff {largeur: 100px;}
Le résultat est 400px.
Le style suivant est Current Style, qui a une solide MS de soutien, ce qui signifie que ce type ne peut être utilisé que dans IE Browser. D'autres ne sont pas bons. Il est utilisé par Window.CurrentStyle ["Att '] ou Window.currentStyle.attr. Dans IE, obtenez la valeur d'attribut de largeur de 300px dans une feuille de style embarquée, qui ne peut pas être transmise dans Mozilla Firefox.
Le dernier vient pour getCompuledStyle, qui utilise Window.getCompuledStyle (OB, Pseudoelt) ["Att '] ou Window.getCompupedStyle (OB, Pseudoelt) .Attr. Parmi eux, Pseudoelt représente une pseudoclasse telle que: après, avant.
Le critique de cinéma a commenté:
GetComputedStyle fonctionne de la même manière que CurrentStyle, mais il convient à FF, Opera, Safari et Chrome.
Avec une attitude sceptique, je l'ai vérifiée à nouveau, et IE7, IE8, et IE9 toutes les erreurs signalées:
L'objet ne prend pas en charge l'attribut ou la méthode "getCompuledStyle"
Problèmes de compatibilité du navigateur. Le problème de compatibilité du navigateur est en effet un mal de tête pour les développeurs frontaux, en particulier le coupable IE6. Mais nous ne pouvons pas avoir peur et en rester à l'écart, mais nous traitons plutôt des mouvements, et les soldats viennent bloquer l'eau et le sol. Vous vous amuserez beaucoup dans le combat avec lui et un sentiment d'accomplissement après l'avoir vaincu! ! !
Un autre point: getCompuledStyle et CurrentStyle ne peuvent obtenir que des valeurs d'attribut, mais ne peuvent pas définir des attributs. Si vous souhaitez définir la valeur d'attribut, utilisez ob.style.attr.
S'il vous plaît, donnez-moi des conseils s'il y a quelque chose qui ne va pas, merci d'avance! !