jquery設定元素的類別樣式

jquery設定元素的類別樣式

設定元素樣式的方法

1.透過設定標籤的class屬性,來指定要套用的類別樣式規則

2 .直接設定標籤的style屬性,來對目前元素進行樣式重置

1.應用類別樣式:addClass()

$('#pic').addClass('circle')
$('#pic').addClass('circle shadow')

2.移除類別樣式:removeClass()

$('#pic').removeClass('circle')
$('#pic').removeClass('shadow')
$('#pic').removeClass('circle shadow')

3.樣式自動切換:toogleClass()

如果當前元素沒有添加類別樣式,那麼自動添加上它指定的類別樣式

$('#pic').toggleClass('circle shadow')

如果當前元素已經被添加上類別樣式,那麼它就會移除掉這個類別樣式

先給元素添加上類別樣式

$('#pic').addClass('circle')
$('#pic').addClass('circle shadow')

現在執行的就是移除動作

$('#pic').toggleClass('circle shadow')

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') 
}

//控制台查看結果

console.log(res)

以上是jquery設定元素的類別樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！