Il existe généralement deux façons dont JavaScript accède aux propriétés CSS: "Accès aux éléments" et "Accès directement sur les feuilles de style". De plus, il y a un problème qui ne peut pas être ignoré lors de l'accès aux styles - styles d'exécution.
1. Accès via des éléments
Étant donné que 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 de Dom, donc je n'en dirai pas plus ici. Après avoir obtenu la référence, vous pouvez accéder à un certain attribut via "Reference.Style. Attribut à l'accès". Par exemple, consultez le code suivant.
<pren name = "Code"> <pren name = "code"> <! doctype html> <html> <adread> <meta charset = "utf-8"> <style> #a {hauteur: 100px; Largeur: 100px; Color d'arrière-plan: rouge; } </ style> </ head> <body> <div id = "a"> </div> </ body> </html>Lorsque nous voulons obtenir la couleur d'arrière-plan de #A, nous pouvons documenter.getElementById ("A"). Style.BackgroundColor; De cette façon, l'accès est terminé. Après cela, que ce soit pour retourner ou modifier la valeur d'attribut, c'est à vous.
2. Accès direct à la feuille de style
En général, l'accès direct à la feuille de style est "Trouvez d'abord le bloc de style correspondant, puis trouvez les règles de style correspondantes dans le bloc de style, et enfin trouvez le style correspondant dans la règle de style."
Parlons des blocs de style en premier. Dans le code, le code CSS existera entre les balises <ystyle> </fyle> ou dans <nk>, et un <ystyle> </prys> ou <enk> est un bloc de style. Dans le code, plusieurs blocs de code peuvent être organisés en séquence de haut en bas, et nous pouvons accéder aux blocs de style comme nous accéder à des éléments de tableau. Par exemple, si nous voulons accéder au premier dans le bloc de style, nous pouvons documenter.Stylesheets [0]
Dites ensuite quelles sont les règles de style. Regardez d'abord le code suivant
<pren name = "code"> <! doctype html> <html> <éad- head> <meta charset = "utf-8"> <style> #a {height: 100px; Largeur: 100px; Color d'arrière-plan: rouge; } #b {hauteur: 100px; Largeur: 100px; Color en arrière-plan: bleu; } nousLe code spécifie les styles de #A et #B respectivement. La collection de styles de #A ou la collection de #B est une règle de style. Dans ce bloc de style, la première règle de style pour #A et la règle de deuxième style pour #B. Nous pouvons également accéder aux règles de style comme nous pouvons accéder aux éléments du tableau. Par exemple, si nous voulons accéder aux règles de style #B, nous pouvons documenter.Stylesheets [0] .cssrules [1] Bien sûr, vous pouvez choisir d'écrire un document.stylesheet [0] .rules [1] comme ceci, mais cette méthode d'écriture n'est pas prise en charge par Firefox.
Ensuite, nous pouvons accéder au style correspondant. Par exemple, si nous voulons modifier la couleur d'arrière-plan de #B en vert, nous pouvons documenter.stylesheets [0] .cssrules [1] .style.backgroundColor = "Green";
3. Style d'exécution
Regardez le code suivant:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <style> #a {hauteur: 100px; Largeur: 100px; Couleur: rouge; } #b {hauteur: 100px; Largeur: 100px; } nousLorsque nous exécutons alert (document.getElementById ("b"). Style.color);, nous constatons que rien n'est sorti sur la fenêtre contextuelle, mais la couleur de la police de la page est évidemment rouge. Pourquoi? En effet, les attributs d'objets de style de chaque élément ne sont pas mis à jour instantanément. Lorsque nous voulons sortir du rouge sur la fenêtre contextuelle, nous devons utiliser le style d'exécution. window.getCompuledStyle (document.getElementById ("b"), null) .color afin que vous puissiez accéder à "rouge". Il existe une autre façon d'accéder au Style Runtime Document.getElementById ("B"). CurrentStyle.Color, mais cette façon n'est prise en charge que par IE.