Introduction à plusieurs façons d'accéder aux propriétés CSS dans les astuces JavaScript

Introduction à plusieurs façons d'accéder aux propriétés CSS dans les astuces JavaScript_javascript

WBOY

Libérer： 2016-05-16 16:41:29

original

1469 Les gens l'ont consulté

De manière générale, il existe deux manières pour JavaScript d'accéder aux propriétés CSS : "l'accès via les éléments" et "l'accès direct aux feuilles de style". De plus, il existe un problème qui ne peut être ignoré lors de l'accès aux styles : les styles d'exécution.

1. Accédez

via les éléments

Puisque vous souhaitez accéder à la feuille de style via des éléments, vous devez d'abord déterminer de quel élément il s'agit. C’est le contenu du DOM, je n’entrerai donc pas dans les détails ici. Après avoir obtenu la référence, vous pouvez accéder à un attribut via "reference.style.attribute to be accessed". Par exemple, considérons le code suivant.

<pre name="code" class="html"><pre name="code" class="html"><!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style> 
#a{ 
height:100px; 
width:100px; 
background-color:red; 
} 
</style> 
</head> 
<body> 
<div id="a"></div> 
</body> 
</html>

Copier après la connexion

Lorsque nous voulons obtenir la couleur d'arrière-plan de #a, nous pouvons document.getElementById("a").style.backgroundColor; Ceci termine l'accès. C'est à vous de décider si vous souhaitez renvoyer ou modifier la valeur de l'attribut. .

2. Accédez directement à la feuille de style

Accéder directement à la feuille de style signifie généralement "trouver d'abord le bloc de style correspondant, puis trouver la règle de style correspondante dans le bloc de style, et enfin trouver le style correspondant dans la règle de style".

Tout d’abord, parlons des blocs de style. Dans le code, le code CSS existera entre les balises ou à l'intérieur du . Un bloc de style Il peut y avoir plusieurs blocs de code disposés de haut en bas dans le code, et nous pouvons accéder au bloc de style comme un élément de tableau. Par exemple, si nous voulons accéder au premier bloc de style, nous pouvons document.styleSheets[0]

Alors quelles sont les règles de style. Regardez d’abord le code suivant

<pre name="code" class="html"><!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style> 
#a{ 
height:100px; 
width:100px; 
background-color:red; 
} 
#b{ 
height:100px; 
width:100px; 
background-color:blue; 
} 
</style> 
</head> 
<body> 
<div id="a"></div> 
<div id="b"></div> 
</body> 
</html>

Copier après la connexion

Les styles de #a et #b sont respectivement spécifiés dans le code. La collection de styles #a ou la collection de #b est une règle de style. Dans ce bloc de style, la première règle de style est pour #a et la deuxième règle de style est pour #b. Nous pouvons également accéder aux règles de style tout comme aux éléments d’un tableau. Par exemple, si nous voulons accéder aux règles de style #b, nous pouvons utiliser document.styleSheets[0].cssRules[1]. Bien sûr, vous pouvez choisir d'écrire document.styleSheet[0].rules[1] comme ceci, mais cette façon d'écrire n'est pas supportée par Firefox.

Ensuite, nous pouvons accéder aux styles correspondants. Par exemple, si nous voulons changer la couleur d'arrière-plan de #b en vert, nous pouvons document.styleSheets[0].cssRules[1].style.backgroundColor="green";

3. Style d'exécution

Regardez le code suivant :

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style> 
#a{ 
height:100px; 
width:100px; 
color:red; 
} 
#b{ 
height:100px; 
width:100px; 
} 
</style> 
</head> 
<body> 
<div id="a"> 
<div id="b">观察字体颜色</div> 
</div> 
</body> 
</html>

Copier après la connexion

Lorsque nous exécutons alert(document.getElementById("b").style.color); nous constatons que rien ne s'affiche dans la fenêtre contextuelle, mais la couleur de la police de la page est clairement rouge. Pourquoi ? En effet, les propriétés de l'objet de style de chaque élément ne sont pas mises à jour immédiatement. Lorsque nous voulons afficher du rouge sur la fenêtre contextuelle, nous devons utiliser le style d'exécution. window.getComputedStyle(document.getElementById("b"),null).color De cette façon, vous pouvez accéder à "rouge". Il existe une autre façon d'accéder au style d'exécution, document.getElementById("b").currentStyle.color, mais cette façon d'écrire n'est prise en charge que par IE.