codecamp

W3.JS 添加类

添加一个类:

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 »


W3.JS 添加样式
W3.JS 筛选
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }