W3.JSはHTMLにクラスを追加します


クラスを追加します。

w3.addClass(selector,'class')

複数のクラスを追加します。

w3.addClass(selector,'class1 class2 class3...')

IDでクラスを追加

「marked」クラスをid = "London"の要素に追加します。

<button onclick="w3.addClass('#London','marked')">Add Class</button>


タグでクラスを追加

「marked」クラスをすべての<h2>要素に追加します。

<button onclick="w3.addClass('h2','marked')">Add Class</button>


クラスごとにクラスを追加

class = "city"を使用して、「マークされた」クラスを要素に追加します。

<button onclick="w3.addClass('.city','marked')">Add Class</button>


複数のクラスを追加する

要素に複数のクラスを追加するには、各クラスをスペースで区切ります。

id = "London"の要素に "class1"と "class2"の両方を追加します。

<button onclick="w3.addClass('#London','class1 class2')">Add Classes</button>

HTML要素からクラスを削除する

クラスを削除します。

w3.removeClass(selector,'class')

複数のクラスを削除します。

w3.removeClass(selector,'class1 class2 class3...')

IDでクラスを削除

id = "London"の要素から "marked"クラスを削除します。

<button onclick="w3.removeClass('#London','marked')">Remove Class</button>


タグでクラスを削除

すべての<h2>要素から「マークされた」クラスを削除します。

<button onclick="w3.removeClass('h2','marked')">Remove Class</button>


クラスごとに削除

class = "city"を使用して、すべての要素から「マークされた」クラスを削除します。

<button onclick="w3.removeClass('.city','marked')">Remove Class</button>


複数のクラスを削除する

要素から複数のクラスを削除するには、各クラスをスペースで区切ります。

id = "London"の要素から "class1"と "class2"の両方を削除します。

<button onclick="w3.removeClass('#London','class1 class2')">Remove Classes</button>

HTML要素のクラスを切り替えます

クラスの切り替え(オン/オフ):

w3.toggleClass(selector,'class')

2つのクラスを切り替えます。

w3.toggleClass(selector,'property','class','class')

IDによるクラスの切り替え

id = "London"を持つ要素の「マークされた」クラスを切り替えます。

<button onclick="w3.toggleClass('#London','marked')">Toggle</button>


タグでクラスを切り替える

すべての<h2>要素の「マークされた」クラスを切り替えます。

<button onclick="w3.toggleClass('h2','marked')">Toggle</button>


クラスごとにクラスを切り替える

class = "city"を使用して、すべての要素の「マークされた」クラスを切り替えます。

<button onclick="w3.toggleClass('.city','marked')">Toggle</button>


複数のクラスを切り替えます

id = "Londonのクラス名" class1 "と" class2 "を切り替えます。

<button onclick="w3.toggleClass('#London','class1','class2')">Toggle</button>