jquery设置元素的类样式

无忌哥哥
Lepaskan: 2018-06-29 13:48:11
asal
1708 orang telah melayarinya

jquery设置元素的类样式

设置元素样式的方法

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

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

1.应用类样式:addClass()

$('#pic').addClass('circle')
$('#pic').addClass('circle shadow')
Salin selepas log masuk
Salin selepas log masuk

2.移除类样式:removeClass()

$('#pic').removeClass('circle')
$('#pic').removeClass('shadow')
$('#pic').removeClass('circle shadow')
Salin selepas log masuk

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

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

$('#pic').toggleClass('circle shadow')
Salin selepas log masuk
Salin selepas log masuk

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

先给元素添加上类样式

$('#pic').addClass('circle')
$('#pic').addClass('circle shadow')
Salin selepas log masuk
Salin selepas log masuk

现在执行的就是移除操作

$('#pic').toggleClass('circle shadow')
Salin selepas log masuk
Salin selepas log masuk

4.查询类样式: hasClass()

var res = $('#pic').hasClass('circle shadow') //false
$('#pic').addClass('circle shadow') 
var res = $('#pic').hasClass('circle shadow') //true
if ($('#pic').hasClass('circle shadow')) {
$('#pic').removeClass('circle shadow')
} else {
$('#pic').addClass('circle shadow') 
}
Salin selepas log masuk

//控制台查看结果

console.log(res)
Salin selepas log masuk

Atas ialah kandungan terperinci jquery设置元素的类样式. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan