---
title: Element.setAttribute()
slug: Web/API/Element/setAttribute
tags:
  - API
  - Attributs
  - DOM
  - Element
  - Méthode
translation_of: Web/API/Element/setAttribute
---
<p>{{APIRef("DOM")}}</p>

<p>Ajoute un nouvel attribut ou change la valeur d'un attribut existant pour l'élément spécifié. Si l'attribut existe déjà, la valeur est mise à jour ; sinon, un nouvel attribut est ajouté avec le nom et la valeur spécifiés.</p>

<p>Pour obtenir la valeur actuelle d'un attribut, utilisez {{domxref("Element.getAttribute", "getAttribute()")}} ; pour supprimer un attribut, appelez {{domxref("Element.removeAttribute", "removeAttribute()")}}.</p>

<h2 id="Syntaxe">Syntaxe</h2>

<pre class="syntaxbox"><em>Element</em>.setAttribute(<em>name</em>, <em>value</em>);
</pre>

<h3 id="Paramètres">Paramètres</h3>

<dl>
 <dt><code>name</code></dt>
 <dd>Une {{domxref("DOMString")}} (<em>chaîne de caractères</em>) spécifiant le nom de l'attribut pour lequel la valeur doit être définie. L'attribut name est automatiquement converti en minuscules quand <code>setAttribute()</code> est appelé sur un élément HTML dans document HTML.</dd>
 <dt><code>value</code></dt>
 <dd>une {{domxref("DOMString")}} contenant la valeur à affecter à l'attribut. Toute valeur spécifiée qui n'est pas une chaîne de caractères, est convertie automatiquement en chaîne.</dd>
</dl>

<p>Les attributs booléens sont considérés être <code>true</code> (<em>vrai</em>) s'ils sont présents sur l'élément, quelle que soit leur valeur réelle ; en règle générale, vous devez spécifier la chaîne vide (<code>""</code>) dans <code>value</code> (certains utilisent le nom de l'attribut, mais ce fonctionnement n'est pas standard). Voir l' {{anch("Exemple", "exemple")}} ce-dessous pour une démonstration pratique.</p>

<p>Puisque la valeur spécifiée est convertie en chaîne, spécifier <code>null</code> ne fait pas nécessairement ce que vous attendez. Au lieu de supprimer l'attribut ou de définir sa valeur comme {{jsxref("null")}} , il définit à la place la valeur de l'attribut avec la chaîne "null". Si vous souhaitez supprimer un attribut, appelez {{domxref("Element.removeAttribute","removeAttribute()")}}.</p>

<h3 id="Valeur_retournée">Valeur retournée</h3>

<p>{{jsxref("undefined")}}.</p>

<h3 id="Exceptions">Exceptions</h3>

<dl>
 <dt><code>InvalidCharacterError</code></dt>
 <dd>Le nom d'attribut spécifié contient un ou plusieurs caractères qui ne sont pas valides dans les noms d'attribut.</dd>
</dl>

<h2 id="Exemple">Exemple</h2>

<p>Dans l'exemple suivant, <code>setAttribute()</code> est utilisé pour définir des attributs sur un {{HTMLElement("button")}} (<em>bouton</em>).</p>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;button&gt;Hello World&lt;/button&gt;</pre>

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush:js">var b = document.querySelector("button");

b.setAttribute("name", "helloButton");
b.setAttribute("disabled", "");</pre>

<p>Ceci démontre 2 choses :</p>

<ul>
 <li>le premier appel de <code>setAttribute()</code> ci-dessus montre la modification de la valeur de l'attribut <code>name</code> en "helloButton". Vous pouvez le voir en utilisant l'inspecteur de page de votre navigateur (<a href="https://developers.google.com/web/tools/chrome-devtools/inspect-styles">Chrome</a>, <a href="https://docs.microsoft.com/en-us/microsoft-edge/f12-devtools-guide/dom-explorer">Edge</a>, <a href="/en-US/docs/Tools/Page_Inspector">Firefox</a>, <a href="https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html">Safari</a>).</li>
 <li>Pour définir la valeur d'un attribut booléen, tel que <code>disabled</code>, vous pouvez spécifier n'importe quelle valeur. Une chaîne vide ou le nom de l'attribut sont des valeurs recommandées. Tout ce qui compte est que si l'attribut est présent, quelle que soit sa valeur réelle, sa valeur est considérée comme <code>true</code> (<em>vraie</em>). L'absence de l'attribut signifie que sa valeur est <code>false</code> (<em>fausse</em>). En définissant la valeur de l'attribut <code>disabled</code> sur la chaîne vide (""), nous définissons <code>disabled</code> sur <code>true</code>, ce qui entraîne la désactivation du bouton.</li>
</ul>

<p>{{ EmbedLiveSample('Example', '300', '50') }}</p>

<p>{{DOMAttributeMethods}}</p>

<h2 id="Spécifications">Spécifications</h2>

<ul>
 <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082">DOM Level 2 Core : setAttribute</a> — <small><a href="http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-F68F082">traduction en français</a> (non normative)</small></li>
 <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents">HTML5 : API dans les documents HTML</a></li>
</ul>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<h3 id="Gecko_notes">Gecko notes</h3>

<p>L'utilisation de <code>setAttribute()</code> pour modifier certains attributs, en particulier la valeur dans XUL, fonctionne de façon incohérente, car l'attribut spécifie la valeur par défaut. Pour accéder ou modifier la valeur courante, vous devez utiliser les propriétés. Par exemple, utilisez <code>Element.value</code> à la place de <code>Element.setAttribute()</code>.</p>