From 10ba082441b43b1b232a2439ee2d181316bae8fa Mon Sep 17 00:00:00 2001
From: Masahiro FUJIMOTO <mfujimot@gmail.com>
Date: Mon, 28 Feb 2022 23:27:56 +0900
Subject: 2021/09/15 時点の英語版に同期
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 files/ja/web/api/element/classname/index.md | 82 +++++++++++++++++++----------
 1 file changed, 54 insertions(+), 28 deletions(-)

(limited to 'files/ja/web/api/element/classname/index.md')

diff --git a/files/ja/web/api/element/classname/index.md b/files/ja/web/api/element/classname/index.md
index 00f15100e7..bbdbcc000b 100644
--- a/files/ja/web/api/element/classname/index.md
+++ b/files/ja/web/api/element/classname/index.md
@@ -1,35 +1,61 @@
 ---
-title: element.className
+title: Element.className
 slug: Web/API/Element/className
 tags:
+  - API
   - DOM
   - Gecko
-  - Gecko DOM Reference
+  - プロパティ
+  - リファレンス
+browser-compat: api.Element.className
 translation_of: Web/API/Element/className
 ---
-<div>
- {{ApiRef}}</div>
-<h2 id="Summary" name="Summary">概要</h2>
-<p><strong>className</strong> は要素の <code>class</code> 属性の値の取得 / 設定に用います。</p>
-<h2 id="Syntax" name="Syntax">構文</h2>
-<pre class="syntaxbox"><var>cName</var> = <var>elementNodeReference</var>.className;
-<var>elementNodeReference</var>.className = <var>cName</var>;</pre>
-<ul>
- <li><var>cName</var> : クラス名(文字列)</li>
-</ul>
-<h2 id="Example" name="Example">例</h2>
-<pre class="brush:js">var elm = document.getElementById("div1"); //対象要素を取得
-
-if (elm.className == "fixed") {
-  // 対象要素のクラス名が "fixed" であった場合の処理をここに記述
-}</pre>
-<h2 id="Notes" name="Notes">注記</h2>
-<p>"class" という語句はプログラミングに於いて様々な文脈で用いられる為、競合を防ぐために <code>className</code> という名称となっています。</p>
-<h2 id="Specification" name="Specification">仕様書</h2>
-<ul>
- <li><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95362176">DOM Level 2 HTML: className</a></li>
-</ul>
-<h2 id="See_also" name="See_also">関連情報</h2>
-<ul>
- <li>{{domxref("element.classList")}}</li>
-</ul>
+{{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")}}
-- 
cgit v1.2.3-54-g00ecf