---
title: Element.className
slug: Web/API/Element/className
tags:
  - API
  - DOM
  - Gecko
  - Proprietà
  - Referenza
translation_of: Web/API/Element/className
---
<div>{{APIRef("DOM")}}</div>

<p><span class="seoSummary">La proprietà <code><strong>className</strong></code> dell'interfaccia {{domxref("Element")}} ottiene e imposta il valore <a href="/en-US/docs/Web/HTML/Global_attributes/class">dell'attributo <code>class</code></a> dell'elemento specificato.</span></p>

<h2 id="Sintassi">Sintassi</h2>

<pre class="syntaxbox"><var>var cName</var> = <var>elementNodeReference</var>.className;
<var>elementNodeReference</var>.className = <var>cName</var>;</pre>

<ul>
 <li><code>cName</code> è una variabile stringa che rappresenta le classi o le classi separate dallo spazio dell'elemento corrente.</li>
</ul>

<h2 id="Esempio">Esempio</h2>

<pre class="brush: js">let el = document.getElementById('item');

if (el.className === 'active'){
  el.className = 'inactive';
} else {
  el.className = 'active';
}</pre>

<h2 id="Appunti">Appunti</h2>

<p>Il nome <code>className</code> viene utilizzato per questa proprietà anziché <code>class</code> a causa di conflitti con la parola chiave "class" in molti linguaggi che vengono utilizzati per manipolare il DOM.</p>

<p><code>className</code> può anche essere un'istanza di {{domxref("SVGAnimatedString")}} se <code>element</code> è un {{domxref("SVGElement")}}. È meglio ottenere/impostare <code>className</code> di un elemento usando {{domxref("Element.getAttribute")}} e {{domxref("Element.setAttribute")}} se si ha a che fare con elementi SVG. Tuttavia, tieni presente che {{domxref("Element.getAttribute")}} ritorna <code><a href="https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code> anzichè <code>""</code> se <code>element</code> ha un <a href="/en-US/docs/Web/HTML/Global_attributes/class">attributo <code>class</code></a> vuoto.</p>

<pre class="brush: js">elm.setAttribute('class', elm.getAttribute('class'))</pre>

<div class="note">
<p><code>class</code> è un <strong>Attributo</strong> <strong>HTML</strong>, mentre <code>className</code> è una <strong>proprietà del DOM</strong>.</p>
</div>

<h2 id="Specifiche">Specifiche</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specifica</th>
   <th scope="col">Stato</th>
   <th scope="col">Commento</th>
  </tr>
  <tr>
   <td>{{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}}</td>
   <td>{{Spec2("DOM WHATWG")}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName("DOM4", "#dom-element-classname", "element.className")}}</td>
   <td>{{Spec2("DOM4")}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}</td>
   <td>{{Spec2("DOM2 HTML")}}</td>
   <td>Definizione iniziale</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>



<p>{{Compat("api.Element.className")}}</p>

<h2 id="Vedi_anche">Vedi anche</h2>

<ul>
 <li>{{domxref("element.classList")}}</li>
</ul>