W3.JS 添加類

2020-11-05 17:03 更新

添加一個類:

w3.addClass(selector,'class')

添加多個類:

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

根據(jù)Id添加類

將“marked”類添加到id=“London”的元素中:

實例

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

嘗試一下 ?   添加上CSS ?

根據(jù)標(biāo)簽添加類

在所有<h2>元素中添加“marked”類:

實例

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

嘗試一下 ?   添加上CSS ?

根據(jù)類添加類

class="city""marked" 類添加到元素中:

實例

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

嘗試一下 ?   添加上CSS ?

添加多個類

若要向一個元素添加多個類,請用空格分隔每個類。

"class1""class2"添加到id="London"的元素:

實例

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

嘗試一下 ?   添加上CSS ?

從HTML元素中刪除類

刪除一個類:

w3.removeClass(selector,'class')

刪除多個類:

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

根據(jù)Id刪除類

id="London"的元素中刪除"marked"類:

實例

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

嘗試一下 ?   添加上CSS ?

根據(jù)標(biāo)簽刪除類

從所有<h2>元素中刪除“marked”類:

實例

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

嘗試一下 ?   添加上CSS ?

根據(jù)類刪除類

class="city"刪除所有元素中的"marked"類:

實例

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

嘗試一下 ?   添加上CSS ?

?刪除多個類?

若要從一個元素中刪除多個類,請用空格分隔每個類。

id="London"的元素中刪除"class1""class2":

實例

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

嘗試一下 ?   添加上CSS ?

切換HTML元素的類

切換一個類(打開/關(guān)閉):

w3.toggleClass(selector,'class')

在兩個類之間切換:

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

根據(jù)Id切換類

id="London"的元素的"marked"類之間切換:

實例

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

嘗試一下 ?   添加上CSS ?

根據(jù)標(biāo)簽切換類

在所有<h2>元素的“marked”類之間切換:

實例

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

嘗試一下 ?   添加上CSS?

根據(jù)類切換

在所有元素的“標(biāo)記”類之間切換class=“city”:

實例

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

嘗試一下 ?   添加上CSS?

切換多個類

在id="London "的類名"class1"和"class2"之間切換:

實例

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

嘗試一下 ?   添加上CSS ?


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號