jquery设置元素的类样式-tutorial js-php.cn

jquery设置元素的类样式

无忌哥哥

Lepaskan： 2018-06-29 13:48:11

asal

1662 orang telah melayarinya

jquery设置元素的类样式

设置元素样式的方法

1.通过设置标签的class属性,来指定要应用的类样式规则

2.直接设置标签的style属性,来对当前元素进行样式重置

1.应用类样式:addClass()

$(&#39;#pic&#39;).addClass(&#39;circle&#39;)
$(&#39;#pic&#39;).addClass(&#39;circle shadow&#39;)

Salin selepas log masuk

2.移除类样式:removeClass()

$(&#39;#pic&#39;).removeClass(&#39;circle&#39;)
$(&#39;#pic&#39;).removeClass(&#39;shadow&#39;)
$(&#39;#pic&#39;).removeClass(&#39;circle shadow&#39;)

Salin selepas log masuk

3.样式自动切换:toogleClass()

如果当前元素没有添加类样式,那么自动添加上它指定的类样式

$(&#39;#pic&#39;).toggleClass(&#39;circle shadow&#39;)

Salin selepas log masuk

如果当前元素已经被添加上类样式,那么它就会移除掉这个类样式

先给元素添加上类样式

$(&#39;#pic&#39;).addClass(&#39;circle&#39;)
$(&#39;#pic&#39;).addClass(&#39;circle shadow&#39;)

Salin selepas log masuk

现在执行的就是移除操作

$(&#39;#pic&#39;).toggleClass(&#39;circle shadow&#39;)

Salin selepas log masuk

4.查询类样式: hasClass()

var res = $(&#39;#pic&#39;).hasClass(&#39;circle shadow&#39;) //false
$(&#39;#pic&#39;).addClass(&#39;circle shadow&#39;) 
var res = $(&#39;#pic&#39;).hasClass(&#39;circle shadow&#39;) //true
if ($(&#39;#pic&#39;).hasClass(&#39;circle shadow&#39;)) {
$(&#39;#pic&#39;).removeClass(&#39;circle shadow&#39;)
} else {
$(&#39;#pic&#39;).addClass(&#39;circle shadow&#39;) 
}

Salin selepas log masuk

//控制台查看结果