首頁 > web前端 > js教程 > 主體

jquery設定元素的類別樣式

无忌哥哥
發布: 2018-06-29 13:48:11
原創
1703 人瀏覽過

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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板