W3.JS 添加类

2020-11-05 17:03 更新

添加一个类:

w3.addClass(selector,'class')

添加多个类:

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

根据Id添加类

将“marked”类添加到id=“London”的元素中:

实例

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

尝试一下 »   添加上CSS »

根据标签添加类

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

实例

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

尝试一下 »   添加上CSS »

根据类添加类

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...')

根据Id删除类

id="London"的元素中删除"marked"类:

实例

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

尝试一下 »   添加上CSS »

根据标签删除类

从所有<h2>元素中删除“marked”类:

实例

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

尝试一下 »   添加上CSS »

根据类删除类

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元素的类

切换一个类(打开/关闭):

w3.toggleClass(selector,'class')

在两个类之间切换:

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

根据Id切换类

id="London"的元素的"marked"类之间切换:

实例

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

尝试一下 »   添加上CSS »

根据标签切换类

在所有<h2>元素的“marked”类之间切换:

实例

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

尝试一下 »   添加上CSS»

根据类切换

在所有元素的“标记”类之间切换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 »


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号