HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのclassNameプロパティとは？使い方とサンプルコードを解説

HTML DOM の className プロパティは、HTML 要素に対して CSS クラスを割り当てるために使用されるプロパティです。要素の class 属性の値を設定したり、現在設定されている値を取得したりすることができます。もし要素に何もクラスが関連付けられていない場合、このプロパティは空文字列を返します。


また、className プロパティを活用すれば、JavaScript から動的にクラス名を追加・変更することもできるため、スタイルの切り替えなどインタラクティブな Web ページの実装において非常に便利な機能です。

構文

className プロパティを設定する際の構文は以下の通りです。

HTMLElementObject.className = class;

ここで指定する「class」の値には、要素に適用したいクラス名を記述します。1つの要素に複数のクラスを適用したい場合は、半角スペースで区切って複数のクラス名を指定することも可能です。

サンプルコード

それでは、HTML DOM の className プロパティを使った具体的な例を見ていきましょう。

<!DOCTYPE html>
<html>
<head>
<style>
    .firstDiv {
        width: 300px;
        height: 100px;
        background-color:lightgreen;
    }
    .secondDiv{
        color: red;
        border:solid 1px blue;
        margin-bottom:9px;
    }
</style>
</head>
<body>
<p>Click the below button to display the class attribute value of the div </p>
<div id="myDIV" class="firstDiv secondDiv">
This is a sample div element.
</div>
<button onclick="getClassName()">GET CLASS</button>
<p id="Sample"></p>
<script>
    function getClassName() {
        var x = document.getElementById("myDIV").className;
        document.getElementById("Sample").innerHTML ="The classNames with the div element
            are "+x;
    }
</script>
</body>
</html>

出力結果

上記のコードを実行すると、画面には次のように表示されます。

HTML DOMのclassNameプロパティとは？使い方とサンプルコードを解説

そして、GET CLASS ボタンをクリックすると、以下のような結果が得られます。

HTML DOMのclassNameプロパティとは？使い方とサンプルコードを解説

コードの解説

上記のサンプルでは、まず id が「myDIV」である div 要素を作成し、その中にテキストを配置しています。

<div id="myDIV" class="firstDiv secondDiv">
This is a sample div element.
</div>

この div 要素には「firstDiv」と「secondDiv」という2つのクラスが、半角スペースで区切られて指定されている点に注目してください。

続いて、クリックされたときに getClassName() 関数を呼び出す GET CLASS ボタンを作成しています。

<button onclick="getClassName()">GET CLASS</button>

getClassName() 関数の中では、getElementById() メソッドを使って div 要素を取得し、さらに className プロパティによってその要素が持つすべてのクラス名を取得して、変数 x に代入しています。最後に、id が「Sample」の段落（p 要素）の innerHTML に結果を書き込むことで、クラス名が画面に表示されます。

function getClassName() {
    var x = document.getElementById("myDIV").className;
    document.getElementById("Sample").innerHTML ="The classNames with the div element are "+x;
}

このように className プロパティを使えば、要素の class 属性の値を簡単に取得・操作できます。クラス名を書き換えることで CSS のスタイルを動的に変化させられるため、ボタンの状態表示やタブの切り替えなど、さまざまな場面で応用できる重要なプロパティです。

  1. HTML DOM StyleのpageBreakInsideプロパティとは？構文と使い方を実例付きで解説

    HTML DOMのpageBreakInsideプロパティは、HTML文書内の特定の要素「内部」における改ページ（ページ区切り）の挙動を取得・変更するためのプロパティです。主に印刷や印刷プレビューの際に、要素の途中でページが分断されるのを防ぎたい場合などに活用されます。構文pageBreakInsideプロパティの基本的な構文は以下のとおりです。1. 値を取得する場合object.pageBreakInside2. 値を設定する場合object.pageBreakInside = value指定できる値valueには以下のいずれかの値を指定できます。値説明auto必要に応じて、要素の内部に改ペ

  2. HTML DOMのdisplayプロパティとは？使い方と全設定値をわかりやすく解説

    HTML DOMのdisplayプロパティは、要素の表示形式（表示タイプ）を設定または取得するために使用されるプロパティです。要素の表示は主に「block（ブロック）」と「inline（インライン）」の2種類に分類されます。また、display:noneを指定することで、要素を画面上から完全に非表示にすることも可能です。 displayプロパティの構文 displayプロパティを設定する場合の構文は以下のとおりです。 object.style.display = value displayプロパティに指定できる値の一覧 displayプロパティには、以下のような値を指定できます。 値説明