TechCodeview

CSS で class 属性を使用すると、対応するクラス名を持つ要素に対していくつかのタスクを実行できます。この記事では、JavaScript を使用して要素にクラスを追加する方法について説明します。で JavaScript 、要素にクラスを追加するにはいくつかの方法があります。使用できます 。クラス名 財産または 。追加（） 特定の要素にクラス名を追加するメソッド。

次に、要素にクラスを追加する方法について説明します。

.className プロパティの使用

の 。クラス名 プロパティは要素のクラス名を設定します。このプロパティは、要素のクラス属性の値を返すために使用できます。このプロパティを使用すると、既存のクラスを置き換えることなく、HTML 要素にクラスを追加できます。

複数のクラスを追加するには、次のように名前をスペースで区切る必要があります。 'クラス1 クラス2' 。

要素に対してクラスがすでに宣言されており、同じ要素に新しいクラス名を追加する必要がある場合は、新しいクラス名を記述する前にスペースを挿入して宣言する必要があります。そうしないと、既存のクラス名が上書きされます。次のように記述できます。

 document.getElementById('div1').className = ' newClass'; 

上記のコードでは、前にスペースを挿入しています。 新しいクラス 。

構文

クラス名を設定または返すためにこのプロパティで一般的に使用される構文を以下に示します。

クラス名を設定するには

 element.className = class 

クラス名を返すには

 element.className 

使用例は、 。クラス名 プロパティは次のように与えられます。

例 - クラス名の追加

この例では、 。クラス名 を追加するためのプロパティ 'のために' idを持つ段落要素へのクラス 「p1」 。クラス名を使用して、対応する段落に CSS を適用しています。 'のために' 。

指定されたものをクリックする必要があります HTMLボタン 「クラスを追加」 効果を確認します。

 add class name using JavaScript .para { font-size: 30px; background-color: yellow; color: blue; border: 2px dotted red; } <p id="p1"> Welcome to the javaTpoint.com </p> <p> Click the following button to see the effect. </p> Add Class function fun() { var a = document.getElementById(&apos;p1&apos;); a.classList.add(&apos;para&apos;); } 

出力

指定されたボタンをクリックすると、出力は次のようになります -