Element.className- クラス属性を取得する

投稿日:2016/03/03 / 更新日:2016/03/03

JavaScriptの、ElementオブジェクトのclassNameはクラス属性を取得するプロパティです。

説明

ElementオブジェクトのclassNameプロパティは、その要素のクラス属性の文字列です。

<a class="syncer arayutw squirrel">SYNCER</a>

// aElement = <a class="syncer arayutw squirrel">SYNCER</a>

// classNameをコンソールに出力 ( "syncer arayutw squirrel" )
console.log( aElement.className ) ;

classNameプロパティに新しく値を設定することで、その要素のクラス属性を変更することができます。クラス属性が変更されると、ブラウザはそれに合わせてレンダリングをやり直します。つまり、すぐに画面に反映されます。

// classNameを変更 ( → <a class="apple orange">SYNCER</a> )
aElement.className = "apple orange" ;

サンプルコード

<a id="target" class="syncer arayutw squirrel">SYNCER</a>

// 要素を取得 ( → <a id="target" class="syncer arayutw squirrel">SYNCER</a> )
var aElement = document.getElementById( "target" ) ;

// classNameを取得 ( → "syncer arayutw squirrel" )
var className = aElement.className ;

// 要素を取得 ( → <a id="target" class="syncer arayutw squirrel">SYNCER</a> )
var aElement = document.getElementById( "target" ) ;

// classNameを変更 ( → <a id="target" class="apple orange">SYNCER</a> )
aElement.className = "apple orange" ;

デモ

a要素のclassNameプロパティを取得して表示します。また、white redに変更します。

RUN
HTML
CSS
JavaScript

<p><a href="./dummy.php" id="target" class="white blue">SYNCER</a></p> <p><code><a class="<span id="class-name">white blue</span>">SYNCER</a></code></p> <p><pre><code>.blue { background: #00f ; } .red { background: #f00 ; } .white { color: #fff ; }</code></pre></p> <p id="output" class="output"></p> <p id="error" class="error none"></p> <p><button id="get" class="button">取得</button></p> <p><button id="set" class="button">変更</button></p> <p><button id="reset" class="button">リセット</button></p>

.output { color: #333 ; text-align: center ; padding: 8px 0 ; border: 1px solid #333 ; min-height: 24px ; } .blue { color: #fff ; background: #00f ; } .red { color: #fff ; background: #f00 ; } .error { color: #f00 ; padding: 8px 12px ; border: 1px solid #333 ; min-height: 24px ; } .button { color: #333 ; display: block ; background: #f2f2f2 ; text-align: center ; padding: 8px ; font-size: 1rem ; font-weight: 700 ; border: 1px solid #e6e6e6 ; width: 100% ; box-sizing: border-box ; } .button:hover { cursor: pointer ; background: #e6e6e6 ; } .none { display: none ; } html{ font:400 14px / 1.618 ArialMT,"Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic Pro W3","ヒラギノ角ゴ Pro W3","メイリオ","ＭＳＰゴシック","Osaka" ; }

// 取得 document.getElementById( "get" ).addEventListener( "click", function() { try { // 要素を取得 var aElement = document.getElementById( "target" ) ; // classNameを取得 var className = aElement.className ; // 取得した結果を出力 document.getElementById( "output" ).textContent = className ; // コンソールで内容を出力 console.log( className ) ; // エラーを非表示 errorElement.className = "error none" ; // エラー表示 } catch ( msg ) { errorElement.className = "error" ; errorElement.textContent = msg ; console.error( msg ) ; } } ) ; // 変更 document.getElementById( "set" ).addEventListener( "click", function() { try { // 要素を取得 var aElement = document.getElementById( "target" ) ; // classNameを変更 aElement.className = "white red" ; // 変更したクラス属性を表示 document.getElementById( "class-name" ).textContent = "white red" ; // エラーを非表示 errorElement.className = "error none" ; // エラー表示 } catch ( msg ) { errorElement.className = "error" ; errorElement.textContent = msg ; console.error( msg ) ; } } ) ; // リセット document.getElementById( "reset" ).addEventListener( "click", function() { initialize() ; } ) ; // エラー表示用の要素 var errorElement = document.getElementById( "error" ) ; // 初期化 function initialize() { errorElement.className = "error none" ; document.getElementById( "output" ).textContent = "" ; document.getElementById( "target" ).className = "white blue" ; document.getElementById( "class-name" ).textContent = "white blue" ; }

構文

string className = Element.className
Element.className = string newClassName

返り値

項目	説明
className	クラス属性。

指定する値

項目	説明
newClassName	新しく設定したいクラス属性の文字列。

外部リンク

HTML Living Standard - WHATWGによる仕様書。

説明

サンプルコード

デモ

構文

返り値

指定する値

関連項目

外部リンク