Chargement...

Styles CSS en JavaScript

Sur le mur de l'atelier, une pastille de peinture est déjà là. Le titre dit Oak et l'échantillon dit open. La règle #swatch de la feuille met color à navy et font-size à 16px. La classe dusk n'est pas encore sur l'échantillon. Sa règle est font-style: italic. Changer le CSS depuis JavaScript, c'est écrire le style en ligne ou ajouter cette classe. Le mot open reste en place.
element.style ne montre que les déclarations en ligne. Donc swatch.style.color et swatch.style.fontSize sont des chaînes vides avant toute écriture. La taille utilisée vient de getComputedStyle(swatch).fontSize : 16px.
swatch.style.color = "teal" et swatch.style.fontSize = "22px" rangent ces valeurs en ligne. style.font-size avec un point est une erreur de syntaxe. Le fond passe par setProperty("background-color", "wheat"). Ensuite, getPropertyValue("background-color") et style.backgroundColor lisent wheat.
classList.add("dusk") ajoute seulement la classe. style.color reste teal, style.fontStyle reste vide, et getComputedStyle(swatch).fontStyle devient italic.
Un essai à part : cssText = "color: maroon;". Cette ligne remplace toute la déclaration en ligne. La taille et le fond en ligne deviennent vides, la classe dusk reste. La démo de la page n'exécute pas cette ligne. Elle garde teal, puis removeProperty("color") efface seulement la couleur en ligne. La ligne sous la pastille se lit teal / 22px / empty / dusk. Le texte de l'échantillon est toujours open.

La déclaration de style, pas une phrase neuve sur la pastille

La page d'avant a écrit textContent, innerHTML et insertAdjacentHTML et a changé les mots du bulletin de ferry. Ici tu n'assignes pas textContent à l'échantillon, tu n'analyses pas de balise et tu ne compares pas les façons de trouver un nœud. getElementById te donne seulement la pastille. La leçon, c'est le style en ligne et le jeton de classe.

Ce que chaque écriture laisse sur l'échantillon

L'échantillon commence par le mot open. navy et 16px viennent de la feuille, et il n'y a pas encore de style en ligne. Lis les rangées dans l'ordre. La rangée cssText est un essai à part. La démo s'arrête à removeProperty et ne lance pas cet effacement.

📊 Ce que chaque écriture laisse sur l'échantillon

Écriture	Chaîne en ligne	Encore fourni par la feuille ou la classe	Confusion facile
Rien encore	`color` et `fontSize` valent `""`	`fontSize` calculé : `16px` ; couleur utilisée : navy	lire navy dans `style.color`
`style.color = "teal"` et `style.fontSize = "22px"`	teal et `22px`	le fond n'est pas encore en ligne	`style.font-size`, qui ne s'analyse pas
`setProperty("background-color", "wheat")`	`backgroundColor` vaut wheat	la couleur reste teal	le nom `background-color` à la place du camelCase
`classList.add("dusk")`	`fontStyle` reste `""` ; la couleur reste teal	`fontStyle` calculé : italic	attendre italic dans `style.fontStyle`
`removeProperty("color")`	`color` redevient `""`	`fontSize` reste `22px`	croire que la taille revient à `16px`
`style.cssText = "color: maroon;"`	couleur maroon ; `fontSize` et fond `""`	la classe `dusk` reste	croire que `cssText` retire la classe

element.style est seulement la déclaration en ligne. Une règle de feuille n'y apparaît que si un script la copie dans le style en ligne. getComputedStyle lit la valeur utilisée une fois la feuille, la classe et le style en ligne réunis. Une propriété en ligne l'emporte sur la feuille pour cette même propriété. classList modifie le jeton de classe. Il n'écrit ni style.color ni style.fontStyle. cssText remplace tout l'attribut style par une chaîne. removeProperty retire une propriété en ligne et laisse le reste.

Lis la pastille avant d'écrire

Le fichier s'ouvre avec le titre Oak, le texte open et la feuille au-dessus. Aucune assignation n'a eu lieu. Les trois premiers journaux interrogent le style en ligne. Le quatrième demande la taille utilisée.

Lire la pastille

javascript

let swatch = document.getElementById("swatch");
console.log(swatch.textContent);
console.log(swatch.style.color);
console.log(swatch.style.fontSize);
console.log(getComputedStyle(swatch).fontSize);

Les journaux sont open, une chaîne vide, une chaîne vide et 16px. La couleur utilisée est navy, et le navigateur la rend en rgb(), pas avec le mot navy. style.color est encore vide, donc ce journal n'est pas navy. Le titre Oak est un autre élément. Les écritures suivantes ne changent pas le mot open.

Le camelCase écrit les valeurs en ligne

color et fontSize sont des propriétés de la déclaration. Le nom CSS font-size devient fontSize en JavaScript. Un style.font-size avec un point est une soustraction, le fichier ne s'en sert pas.

camelCase

javascript

let swatch = document.getElementById("swatch");
swatch.style.color = "teal";
swatch.style.fontSize = "22px";
console.log(swatch.style.color);
console.log(swatch.style.fontSize);
console.log(swatch.style.backgroundColor);

Les journaux sont teal, 22px et une chaîne vide. Le fond n'est pas encore posé. La taille utilisée est maintenant 22px, parce que la valeur en ligne l'emporte sur les 16px de la feuille. Le mot sur l'échantillon reste open.

Un nom avec trait d'union passe par setProperty

setProperty prend le nom CSS, trait d'union compris. getPropertyValue lit ce même nom. La propriété backgroundColor relit la valeur que tu viens de ranger.

Nom avec trait d'union

javascript

let swatch = document.getElementById("swatch");
swatch.style.setProperty("background-color", "wheat");
console.log(swatch.style.getPropertyValue("background-color"));
console.log(swatch.style.backgroundColor);

Les deux journaux valent wheat. color reste teal et fontSize reste 22px. Cet appel ajoute une propriété en ligne. Il n'efface pas celles qui sont déjà là.

La classe ne remplit pas style.fontStyle

.dusk dit font-style: italic. Ajouter la classe pose le jeton dusk sur l'élément. La valeur italic vit dans la règle de la feuille, donc la chaîne en ligne fontStyle reste vide. La couleur en ligne est toujours teal : la classe ne l'a pas remplacée.

Ajouter la classe

javascript

let swatch = document.getElementById("swatch");
swatch.classList.add("dusk");
console.log(swatch.classList.contains("dusk"));
console.log(swatch.style.color);
console.log(swatch.style.fontStyle);
console.log(getComputedStyle(swatch).fontStyle);

Les journaux sont true, teal, une chaîne vide et italic. contains regarde le jeton. style.fontStyle regarde la déclaration en ligne. getComputedStyle regarde la valeur utilisée. Ce sont trois lectures différentes.

cssText remplace tout le style en ligne

Ce bloc est un essai à part. Lance-le seulement quand teal, 22px, wheat et dusk sont déjà posés. Assigner cssText écrit un nouvel attribut style et laisse tomber chaque propriété en ligne absente de cette chaîne. La démo plus bas n'a pas cette ligne.

Remplacer le style en ligne

javascript

let swatch = document.getElementById("swatch");
swatch.style.cssText = "color: maroon;";
console.log(swatch.style.color);
console.log(swatch.style.fontSize);
console.log(swatch.style.backgroundColor);
console.log(swatch.classList.contains("dusk"));

Les journaux sont maroon, une chaîne vide, une chaîne vide et true. Les 22px en ligne et wheat ont disparu. La classe dusk est toujours là, parce que cssText touche l'attribut style, pas l'attribut class. Le texte de l'échantillon reste open.

Une ligne sous la pastille

Le script est à la fin de body, une fois la pastille et la feuille en place. Il pose teal, 22px et wheat, ajoute dusk, garde le mot teal, puis retire seulement la couleur en ligne. Il n'assigne pas cssText. Il écrit la couleur en ligne vide avec le mot empty pour que la ligne reste lisible.

Démo de la page — pastille de peinture

html

<!DOCTYPE html>
<html>
<head>
<title>css style — page</title>
<style>
#swatch { color: navy; font-size: 16px; }
.dusk { font-style: italic; }
</style>
</head>
<body>
<article id="wall">
<h2 id="chip">Oak</h2>
<p id="swatch">open</p>
<p id="line">…</p>
</article>
<script>
let swatch = document.getElementById("swatch");
swatch.style.color = "teal";
swatch.style.fontSize = "22px";
swatch.style.setProperty("background-color", "wheat");
swatch.classList.add("dusk");
let saved = swatch.style.color;
swatch.style.removeProperty("color");
let inlineNow = swatch.style.color === "" ? "empty" : swatch.style.color;
let mark = swatch.classList.contains("dusk") ? "dusk" : "no";
document.getElementById("line").textContent = saved + " / " + swatch.style.fontSize + " / " + inlineNow + " / " + mark;
</script>
</body>
</html>

La ligne se lit teal / 22px / empty / dusk. saved garde teal d'avant removeProperty. Après l'appel, style.color est vide et style.fontSize vaut encore 22px. Le fond reste wheat. Le jeton de classe reste dusk, donc le font-style utilisé est italic. La couleur utilisée revient à la feuille, navy, parce que la couleur en ligne a disparu. Le texte de l'échantillon reste open. La page suivante crée de nouveaux éléments. Elle n'ajoute pas une autre façon d'écrire ces propriétés de style.

Vérifie la pastille

Note le texte, les deux chaînes en ligne et la taille calculée : attends open, deux chaînes vides et 16px
Mets color à teal et fontSize à 22px, puis attends teal, 22px et un backgroundColor vide
Pose le fond avec setProperty et attends wheat des deux lectures, puis ajoute dusk et attends true, teal, un fontStyle vide et italic calculé
Dans l'essai à part, assigne cssText à la couleur maroon et attends maroon, un fontSize vide, un fond vide et dusk toujours true
Lis la ligne de la page et attends teal / 22px / empty / dusk, puis lis le texte de l'échantillon et attends open

Ratés sur cette pastille

La page s'ouvre encore. L'assignation a écrit le mauvais genre de valeur.

Lire style.color au départ et attendre navy
Écrire swatch.style.font-size, que l'analyseur refuse
Attendre que classList.add("dusk") range italic dans style.fontStyle
Attendre que cette classe change style.color et le sorte de teal
Assigner cssText et attendre que la taille en ligne 22px reste
Assigner cssText et attendre que la classe dusk disparaisse
Appeler removeProperty("color") et attendre que fontSize retombe à 16px
Mettre textContent sur l'échantillon ici ; la page d'avant changeait les mots
Appeler createElement ici ; la page suivante construit de nouveaux nœuds

Tu repars avec ceci

element.style lit les déclarations en ligne : au début style.color est vide et la taille utilisée est 16px
style.color et style.fontSize gardent teal et 22px
setProperty("background-color", "wheat") correspond à style.backgroundColor
classList.add("dusk") laisse style.fontStyle vide et le style utilisé en italic
cssText = "color: maroon;" efface les autres valeurs en ligne et garde la classe
removeProperty("color") n'efface que la couleur, donc la ligne de la page peut encore montrer 22px
La ligne se lit teal / 22px / empty / dusk et le texte de l'échantillon reste open

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓

Questions

🎯

70%

Pour Réussir

♾️

∞

Temps

🔄

∞

Tentatives

📝 Instructions

Lisez chaque question attentivement
Sélectionnez la meilleure réponse pour chaque question
Vous pouvez refaire le quiz autant de fois que vous le souhaitez
Votre progression sera affichée en haut

Styles CSS en JavaScript

La déclaration de style, pas une phrase neuve sur la pastille

Ce que chaque écriture laisse sur l'échantillon

📊 Ce que chaque écriture laisse sur l'échantillon

Lis la pastille avant d'écrire

Lire la pastille

Le camelCase écrit les valeurs en ligne

camelCase

Un nom avec trait d'union passe par setProperty

Nom avec trait d'union

La classe ne remplit pas style.fontStyle

Ajouter la classe

cssText remplace tout le style en ligne

Remplacer le style en ligne

Une ligne sous la pastille

Démo de la page — pastille de peinture

Vérifie la pastille

Ratés sur cette pastille

Tu repars avec ceci

🧠 Testez Vos Connaissances

Testez Vos Connaissances

📝 Instructions

🚧 Cours Bientôt Disponible

Course Name

Être Notifié Quand Disponible

Disponible Maintenant

Coming Soon

Course Name