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>

亲自试一试» 使用 CSS »


按标签添加类别

将 "marked" 类添加到所有 <h2> 元素:

示例

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

亲自试一试» 使用 CSS »


按类别添加类别

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

示例

<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" 的所有元素的 "marked" 类之间切换:

示例

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

亲自试一试» 使用 CSS »


切换多个类

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

示例

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

亲自试一试» 使用 CSS »