blob: bbdbcc000b93a4b456ac25be87e895c95bf67862 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
---
title: Element.className
slug: Web/API/Element/className
tags:
- API
- DOM
- Gecko
- プロパティ
- リファレンス
browser-compat: api.Element.className
translation_of: Web/API/Element/className
---
{{APIRef("DOM")}}
**`className`** は {{domxref("Element")}} インターフェイスのプロパティで、この要素の [`class` 属性](/ja/docs/Web/HTML/Global_attributes/class)の値を取得したり設定したりします。
## 構文
```js
var cName = elementNodeReference.className;
elementNodeReference.className = cName;
```
- `cName` は文字列変数で、現在の要素のクラスまたは空白区切りのクラス群を表します。
## 例
```js
let el = document.getElementById('item');
if (el.className === 'active'){
el.className = 'inactive';
} else {
el.className = 'active';
}
```
## メモ
このプロパティでは、 `className` という名前が `class` の代わりに使用されています。
これは DOM を操作するために使用される多くの言語と "class" キーワードが競合するためです。
`className` は {{domxref("SVGAnimatedString")}} のインスタンスにも、 `element` が {{domxref("SVGElement")}} であれば存在する可能性があります。 SVG 要素を扱っている場合は、要素の `className` は {{domxref("Element.getAttribute")}} や {{domxref("Element.setAttribute")}} を使用して取得したり設定したりした方がいいでしょう。しかし、その要素の [`class` 属性](/ja/docs/Web/HTML/Global_attributes/class)が空であった場合、 {{domxref("Element.getAttribute")}} は`""` ではなく [`null`](/ja/docs/Web/JavaScript/Reference/Global_Objects/null) を返すことに注意してください。
```js
elm.setAttribute('class', elm.getAttribute('class'))
```
> **Note:** `class` は **HTML 属性**であり、 `className` は **DOM プロパティ**です。
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- {{domxref("element.classList")}}
|
