element.className

  • Revision slug: DOM/element.className
  • Revision title: element.className
  • Revision id: 294996
  • Created:
  • Creator: rpncreator
  • Is current revision? No
  • Comment

Revision Content

{{ DomRef() }}

Summary

className gets and sets the value of the class attribute of the specified element.

Syntax and values

var cName = elementNodeReference.className;
elementNodeReference.className = cName;

cName is a string variable representing the class or space-separated classes of the current element.

Example

var elementNodeReference = document.getElementById("div1");
if (elementNodeReference.className == "fixed") {
   // skip a particular class of element
   goNextElement();
}

Notes

The name className is used for this property instead of class because of conflicts with the "class" keyword in many languages which are used to manipulate the DOM.

Specification

DOM Level 2 HTML: className

See Also

{{ languages( { "fr": "fr/DOM/element.className", "ja": "ja/DOM/element.className", "pl": "pl/DOM/element.className", "zh-cn": "cn/DOM/element.className" } ) }}

Revision Source

<p>{{ DomRef() }}</p>
<h3 id="Summary" name="Summary">Summary</h3>
<p><strong>className </strong> gets and sets the value of the <code>class</code> attribute of the specified element.</p>
<h3 id="Syntax_and_values" name="Syntax_and_values">Syntax and values</h3>
<pre class="brush: js">
var <var>cName</var> = elementNodeReference.className;
elementNodeReference.className = <var>cName</var>;
</pre>
<p><var>cName</var> is a string variable representing the class or space-separated classes of the current element.</p>
<h3 id="Example" name="Example">Example</h3>
<pre class="brush: js">
var elementNodeReference = document.getElementById("div1");
if (elementNodeReference.className == "fixed") {
   // skip a particular class of element
   goNextElement();
}
</pre>
<h3 id="Notes" name="Notes">Notes</h3>
<p>The name <code>className</code> is used for this property instead of <code>class</code> because of conflicts with the "class" keyword in many languages which are used to manipulate the DOM.</p>
<h3 id="Specification" name="Specification">Specification</h3>
<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95362176">DOM Level 2 HTML: className</a></p>
<h3 id="See_Also">See Also</h3>
<ul>
  <li><a href="/en/DOM/element.classList" title="en/DOM/element.classList">element.classList</a></li>
</ul>
<p>{{ languages( { "fr": "fr/DOM/element.className", "ja": "ja/DOM/element.className", "pl": "pl/DOM/element.className", "zh-cn": "cn/DOM/element.className" } ) }}</p>
Revert to this revision