Rumah > hujung hadapan web > tutorial js > jquery设置元素的类样式

jquery设置元素的类样式

无忌哥哥
Lepaskan: 2018-06-29 13:48:11
asal
1800 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!

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