Maison >interface Web >js tutoriel >Introduction à plusieurs façons d'accéder aux propriétés CSS dans les astuces JavaScript_javascript

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

WBOYoriginal: 2016-05-16 16:41:291508parcourir

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>

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 c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 ou à l'intérieur du 2cdf5bf648cf2f33323966d7f58a7f3f. Un bloc de style c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 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>

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>

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.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Méthodes de déclaration de fonctions en JavaScript et valeurs de retour des fonctions d'appel_Connaissances de baseArticle suivant：Méthodes de déclaration de fonctions en JavaScript et valeurs de retour des fonctions d'appel_Connaissances de base

Articles Liés

Voir plus