W3.JS 添加类

添加一个类:

w3.addClass(selector,'class')

添加多个类:

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

根据 Id 添加类

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

实例

<button onclick="w3.addClass('#London','marked')">添加类</button>

亲自试一试 » 使用 CSS »


根据标签添加类

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

实例

<button onclick="w3.addClass('h2','marked')">添加类</button>

亲自试一试 » 使用 CSS »


根据类添加类

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

实例

<button onclick="w3.addClass('.city','marked')">添加类</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" 在所有元素的 "marked" 类之间切换:

实例

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

亲自试一试 » 使用 CSS »


切换多个类

在 id="London" 的类名 "class1" 和 "class2" 之间切换:

实例

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

亲自试一试 » 使用 CSS »