You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 2-ui/1-document/08-styles-and-classes/article.md
+7-30Lines changed: 7 additions & 30 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -128,21 +128,16 @@ setTimeout(() => document.body.style.display = "", 1000); // retour à la normal
128
128
129
129
Si nous attribuons `style.display` à une chaîne vide, le navigateur applique les classes CSS et ses styles intégrés normalement, comme s'il n'y avait pas de propriété `style.display`.
130
130
131
-
<<<<<<< HEAD
132
-
````smart header="Réécriture complète avec `style.cssText`"
133
-
Normalement, nous utilisons `style.*` pour attribuer des propriétés de style individuelles. Nous ne pouvons pas attribuer le style complet comme `div.style="color: red; width: 100px"`, parce que `div.style` est un object, et il est en lecture seulement.
134
-
=======
135
-
Also there is a special method for that, `elem.style.removeProperty('style property')`. So, We can remove a property like this:
131
+
Il existe également une méthode spéciale pour cela, `elem.style.removeProperty('style property')`. Ainsi, nous pouvons supprimer une propriété comme celle-ci :
136
132
137
133
```js run
138
-
document.body.style.background='red'; //set background to red
134
+
document.body.style.background='red'; //configure le background à rouge
139
135
140
-
setTimeout(() =>document.body.style.removeProperty('background'), 1000); //remove background after 1 second
136
+
setTimeout(() =>document.body.style.removeProperty('background'), 1000); //supprime l'arrière-plan après 1 seconde
141
137
```
142
138
143
-
````smart header="Full rewrite with `style.cssText`"
144
-
Normally, we use `style.*` to assign individual style properties. We can't set the full style like `div.style="color: red; width: 100px"`, because `div.style` is an object, and it's read-only.
145
-
>>>>>>> bf7d8bb1af3b416d393af1c15b03cb1352da1f9c
139
+
````smart header="Réécriture complète avec `style.cssText`"
140
+
Normalement, nous utilisons `style.*` pour attribuer des propriétés de style individuelles. Nous ne pouvons pas attribuer le style complet comme `div.style="color: red; width: 100px"`, parce que `div.style` est un object, et il est en lecture seulement.
146
141
147
142
Pour définir un style complet comme une chaîne, il y a une propriété spéciale `style.cssText`:
148
143
@@ -273,25 +268,7 @@ Maintenant, `getComputedStyle` renvoie la valeur résolue de la propriété, hab
273
268
````warn header="`getComputedStyle` exige le nom complet de la propriété"
274
269
Nous devons toujours demander pour la propriété exacte requise, comme `paddingLeft` ou `marginTop` ou `borderTopWidth`. Sinon, recevoir le bon résultat n'est pas garanti.
275
270
276
-
<<<<<<< HEAD
277
-
Par exemple, s'il y a les propriétés `paddingLeft/paddingTop`, qu'est-ce que nous recevrons de `getComputedStyle(elem).padding`? Rien, ou peut-être une valeur générée des écarts de remplissage connus? Il n'y a pas de règle standard ici.
278
-
279
-
Il y a des autres incohérences. À titre d'exemple, certains navigateurs (Chrome) indique `10px` dans le document ci-dessous, et certains (Firefox) -- n'en indique pas:
280
-
281
-
```html run
282
-
<style>
283
-
body {
284
-
margin: 10px;
285
-
}
286
-
</style>
287
-
<script>
288
-
let style = getComputedStyle(document.body);
289
-
alert(style.margin); // chaîne vide dans Firefox
290
-
</script>
291
-
```
292
-
=======
293
-
For instance, if there are properties `paddingLeft/paddingTop`, then what should we get for `getComputedStyle(elem).padding`? Nothing, or maybe a "generated" value from known paddings? There's no standard rule here.
294
-
>>>>>>> bf7d8bb1af3b416d393af1c15b03cb1352da1f9c
271
+
Par exemple, s'il existe des propriétés `paddingLeft/paddingTop`, que devrions-nous obtenir pour `getComputedStyle(elem).padding` ? Rien, ou peut-être une valeur "générée" à partir de paddings connus ? Il n'y a pas de règle standard ici.
295
272
````
296
273
297
274
```smart header="Styles appliqués aux liens `:visited` sont cachés!"
@@ -302,7 +279,7 @@ Cependant, `getComputedStyle` ne donne pas accès à cette couleur, parce qu'aut
302
279
JavaScript ne pourrait pas voir les styles appliqués par `:visited`. De plus, il y a une limitation avec CSS qui interdit l'application de styles qui changent la géométrie dans `:visited`. C'est pour garantir qu'il n'y a aucun moyen pour une page malfaisante de tester si un lien a été visité, qui porterait atteinte à la vie privée.
303
280
```
304
281
305
-
## Récapitulation
282
+
## Résumé
306
283
307
284
Pour gérer les classes, il y a deux propriétés DOM:
0 commit comments