aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/api/element/classlist/index.html
diff options
context:
space:
mode:
authorSphinxKnight <SphinxKnight@users.noreply.github.com>2021-09-26 13:11:47 +0200
committerGitHub <noreply@github.com>2021-09-26 13:11:47 +0200
commit6772831200d14c2436aea2d0c837f40dbf12156f (patch)
treee41b587ce1834baf8c737454c0ae110ebc8208ca /files/fr/web/api/element/classlist/index.html
parent707941dbecfb0cc1e75dd32d2dacac4d1845bf2c (diff)
downloadtranslated-content-6772831200d14c2436aea2d0c837f40dbf12156f.tar.gz
translated-content-6772831200d14c2436aea2d0c837f40dbf12156f.tar.bz2
translated-content-6772831200d14c2436aea2d0c837f40dbf12156f.zip
Prepare Web API section for Markdown conversion (#2464)
* Remove summary classes and ids * Remove unecessary hidden * Remove useless span filled with useless attributes / ids * Remove useless font * Remove notranslate * Remove id in other elements than headings * Remove name attributes * Remove <pre><code> for JS w/ language-js class * Remove <pre><code> for HTML w/ language-html class * Remove <pre><code> for other lang w/ language-* class * Rm highlighted line in code samples * fix links, internal, external, absolute URLs * missing file from last commit * Fix styles errors apart from table + some classes * Fix notes and warnings (+ some other :x) * fix typo during merge which broke a doc * aand forgot a conflict * fix remaining classes of errors except dls and images * Fix dls * Fix images (deki/mozillademos) and remaining style issues * Remove script tag from svg file * Remove script tag from svg fileS * Compress SVG files for CI
Diffstat (limited to 'files/fr/web/api/element/classlist/index.html')
-rw-r--r--files/fr/web/api/element/classlist/index.html54
1 files changed, 27 insertions, 27 deletions
diff --git a/files/fr/web/api/element/classlist/index.html b/files/fr/web/api/element/classlist/index.html
index 569d6a92e7..62a8048b85 100644
--- a/files/fr/web/api/element/classlist/index.html
+++ b/files/fr/web/api/element/classlist/index.html
@@ -16,12 +16,12 @@ translation_of: Web/API/Element/classList
<p>L'utilisation de <code>classList</code> est une alternative à la propriété {{domxref("element.className")}} qui renvoie une chaine composée de la liste des classes, séparées par des espaces.</p>
-<h2 id="Syntax" name="Syntax">Syntaxe</h2>
+<h2 id="Syntax">Syntaxe</h2>
<pre class="syntaxbox">const <var>elementClasses</var> = elementNodeReference.classList;
</pre>
-<p><em>elementClasses</em> est une <a href="/en-US/docs/DOM/DOMTokenList" title="DOM/DOMTokenList">DOMTokenList</a> représentant l'attribut class de <em>elementNodeReference</em>. Si l'attribut class n'a pas été défini ou est vide <em>elementClasses.length</em> retourne 0. <code>element.classList</code> est en lecture seule. Pour la modifier il convient d'utiliser les méthodes <code>add()</code> et <code>remove()</code>.</p>
+<p><em>elementClasses</em> est une <a href="/en-US/docs/DOM/DOMTokenList">DOMTokenList</a> représentant l'attribut class de <em>elementNodeReference</em>. Si l'attribut class n'a pas été défini ou est vide <em>elementClasses.length</em> retourne 0. <code>element.classList</code> est en lecture seule. Pour la modifier il convient d'utiliser les méthodes <code>add()</code> et <code>remove()</code>.</p>
<h2 id="Méthodes">Méthodes</h2>
@@ -34,7 +34,7 @@ translation_of: Web/API/Element/classList
<dt><strong>item</strong>( Number )</dt>
<dd>Renvoie la position d'une classe dans une collection.</dd>
<dt><strong>toggle</strong>( String [, force] )</dt>
- <dd>Si un seul argument est présent : change la présence d'une classe dans la liste. Si la classe existe, alors la <u>supprime</u> et renvoie <code>false</code>, dans le cas inverse, <u>ajoute</u> cette classe et retourne <code>true</code>.<br>
+ <dd>Si un seul argument est présent : change la présence d'une classe dans la liste. Si la classe existe, alors la supprime et renvoie <code>false</code>, dans le cas inverse, ajoute cette classe et retourne <code>true</code>.<br>
Si le second argument est présent : Si l'argument <code>force</code> est à <code>true</code>, ajoute cette classe, si l'argument est à <code>false</code>, la supprime.</dd>
<dt>contains( String )</dt>
<dd>Vérifie si la classe spécifiée est présente dans la liste des classes attribuées à cet élément.</dd>
@@ -44,41 +44,41 @@ translation_of: Web/API/Element/classList
<h2 id="Exemples">Exemples</h2>
-<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">const</span> div <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">'div'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-div<span class="punctuation token">.</span>className <span class="operator token">=</span> <span class="string token">'foo'</span><span class="punctuation token">;</span>
+<pre class="brush: js">const div = document.createElement('div');
+div.className = 'foo';
-<span class="comment token">// notre point de départ: &lt;div class="foo"&gt;&lt;/div&gt;</span>
-console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>div<span class="punctuation token">.</span>outerHTML<span class="punctuation token">)</span><span class="punctuation token">;</span>
+// notre point de départ: &lt;div class="foo"&gt;&lt;/div&gt;
+console.log(div.outerHTML);
-<span class="comment token">// utiliser l'API classList pour supprimer et ajouter des classes</span>
-div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">remove</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="string token">"anotherclass"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+// utiliser l'API classList pour supprimer et ajouter des classes
+div.classList.remove("foo");
+div.classList.add("anotherclass");
-<span class="comment token">// &lt;div class="anotherclass"&gt;&lt;/div&gt;</span>
-console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>div<span class="punctuation token">.</span>outerHTML<span class="punctuation token">)</span><span class="punctuation token">;</span>
+// &lt;div class="anotherclass"&gt;&lt;/div&gt;
+console.log(div.outerHTML);
-<span class="comment token">// si "visible" est défini, le supprimer, sinon, l'ajouter</span>
-div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">toggle</span><span class="punctuation token">(</span><span class="string token">"visible"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+// si "visible" est défini, le supprimer, sinon, l'ajouter
+div.classList.toggle("visible");
-<span class="comment token">// ajouter/supprimer "visible", en fonction d'un test conditionnel, pour i inférieur à 10</span>
-div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">toggle</span><span class="punctuation token">(</span><span class="string token">"visible"</span><span class="punctuation token">,</span> i <span class="operator token">&lt;</span> <span class="number token">10</span> <span class="punctuation token">)</span><span class="punctuation token">;</span>
+// ajouter/supprimer "visible", en fonction d'un test conditionnel, pour i inférieur à 10
+div.classList.toggle("visible", i &lt; 10 );
-console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">contains</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">)</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+console.log(div.classList.contains("foo"));
-<span class="comment token">// ajouter ou supprimer plusieurs classes</span>
-div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">,</span> <span class="string token">"bar"</span><span class="punctuation token">,</span> <span class="string token">"baz"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">remove</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">,</span> <span class="string token">"bar"</span><span class="punctuation token">,</span> <span class="string token">"baz"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
+// ajouter ou supprimer plusieurs classes
+div.classList.add("foo", "bar", "baz");
+div.classList.remove("foo", "bar", "baz");
-<span class="comment token">// ajouter ou supprimer plusieurs classes en utilisant la syntaxe de propagation</span>
-<span class="keyword token">const</span> cls <span class="operator token">=</span> <span class="punctuation token">[</span><span class="string token">"foo"</span><span class="punctuation token">,</span> <span class="string token">"bar"</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
-div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">add</span><span class="punctuation token">(</span><span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span>cls<span class="punctuation token">)</span><span class="punctuation token">;</span>
-div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">remove</span><span class="punctuation token">(</span><span class="punctuation token">.</span><span class="punctuation token">.</span><span class="punctuation token">.</span>cls<span class="punctuation token">)</span><span class="punctuation token">;</span>
+// ajouter ou supprimer plusieurs classes en utilisant la syntaxe de propagation
+const cls = ["foo", "bar"];
+div.classList.add(...cls);
+div.classList.remove(...cls);
-<span class="comment token">// remplacer la classe "foo" par la classe "bar"</span>
-div<span class="punctuation token">.</span>classList<span class="punctuation token">.</span><span class="function token">replace</span><span class="punctuation token">(</span><span class="string token">"foo"</span><span class="punctuation token">,</span> <span class="string token">"bar"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>
+// remplacer la classe "foo" par la classe "bar"
+div.classList.replace("foo", "bar");</pre>
<div class="note">
-<p class="brush: js">Les versions de Firefox antérieures à la 26 n'implémentent pas l'utilisation de plusieurs arguments dans les méthodes add/remove/toggle. Voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814014">https://bugzilla.mozilla.org/show_bug.cgi?id=814014</a></p>
+<p><strong>Note :</strong> Les versions de Firefox antérieures à la 26 n'implémentent pas l'utilisation de plusieurs arguments dans les méthodes add/remove/toggle. Voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814014">https://bugzilla.mozilla.org/show_bug.cgi?id=814014</a></p>
</div>
<h2 id="Prothèse_démulation">Prothèse d'émulation</h2>