jquery如何判斷某元素是否具備指定的樣式
更新時間:2013年11月05日 15:36:40 作者:
判斷某元素是否具備指定的樣式的方法有很多,在接下來的文章中為大家介紹下jquery是如何做到的
分為以下2種情況:
1.如果css寫成行內(nèi)樣式,可以通過獲取style屬性的值來判斷,示例如下:
判斷id為divid的div元素是否有font-size樣式:
<div id="divid" style="float:left; font-size:12px;"></div>
jquery代碼如下:
jQuery("#divid").each(function(){
var fontSize = $(this).attr("style").indexOf("font-size");
if(fontSize != (-1)){alert("已定義");}
else{$(this).css({"float":"left","font-size":"12px"});}
});
注:如果id為divid的div元素只有一個,則jquery的each只執(zhí)行一次。
2.如果css寫成類樣式,可以通過獲取class屬性的值來判斷,示例如下:
判斷id為divid的div元素是否含有類樣式divclass:
.divclass{
background-color: #F33;
}
<div id="divid" class="divclass"></div>
jquery代碼如下:
jQuery("#divid").click(function(){
if(jQuery(this).attr("class").indexOf("divclass")>0){
jQuery(this).removeClass("divclass")
}else{
jQuery(this).addClass("divclass")
}
});
注:以上代碼可以實現(xiàn)點擊切換背景顏色。
1.如果css寫成行內(nèi)樣式,可以通過獲取style屬性的值來判斷,示例如下:
判斷id為divid的div元素是否有font-size樣式:
復制代碼 代碼如下:
<div id="divid" style="float:left; font-size:12px;"></div>
jquery代碼如下:
jQuery("#divid").each(function(){
var fontSize = $(this).attr("style").indexOf("font-size");
if(fontSize != (-1)){alert("已定義");}
else{$(this).css({"float":"left","font-size":"12px"});}
});
注:如果id為divid的div元素只有一個,則jquery的each只執(zhí)行一次。
2.如果css寫成類樣式,可以通過獲取class屬性的值來判斷,示例如下:
判斷id為divid的div元素是否含有類樣式divclass:
復制代碼 代碼如下:
.divclass{
background-color: #F33;
}
<div id="divid" class="divclass"></div>
jquery代碼如下:
復制代碼 代碼如下:
jQuery("#divid").click(function(){
if(jQuery(this).attr("class").indexOf("divclass")>0){
jQuery(this).removeClass("divclass")
}else{
jQuery(this).addClass("divclass")
}
});
注:以上代碼可以實現(xiàn)點擊切換背景顏色。
您可能感興趣的文章:
- JQuery獲取與設置HTML元素的內(nèi)容或文本的實現(xiàn)代碼
- jQuery 獲取對象 根據(jù)屬性、內(nèi)容匹配, 還有表單元素匹配
- JQuery中判斷一個元素下面是否有內(nèi)容或者有某個標簽的判斷代碼
- jQuery使用append在html元素后同時添加多項內(nèi)容的方法
- jquery動態(tài)增加text元素以及刪除文本內(nèi)容實例代碼
- jQuery獲取選中內(nèi)容及設置元素屬性的方法
- 使用jQuery內(nèi)容過濾選擇器選擇元素實例講解
- jQuery給元素添加樣式的方法詳解
- Jquery顯示、隱藏元素以及添加刪除樣式
- jquery動態(tài)添加帶有樣式的HTML標簽元素方法
- JQuery為元素添加樣式的實現(xiàn)方法
- jQuery操作元素的內(nèi)容和樣式完整實例分析
相關文章
jquery實現(xiàn)文字由下到上循環(huán)滾動的實例代碼
這篇文章介紹了jquery實現(xiàn)文字由下到上循環(huán)滾動的實例代碼,有需要的朋友可以參考一下2013-08-08jQuery使用serialize()表單序列化時出現(xiàn)中文亂碼問題的解決辦法
列化中文時出現(xiàn)中文亂碼問題,怎么回事呢?下面給大家介紹下jQuery使用serialize()序列化表單時出現(xiàn)中文亂碼問題的解決辦法,有需要的朋友參考下2016-07-07基于JQuery和原生JavaScript實現(xiàn)網(wǎng)頁定位導航特效
本文通過實例代碼給大家介紹了基于JQuery和原生JavaScript實現(xiàn)網(wǎng)頁定位導航特效,代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的朋友參考下吧2017-04-04jquery實現(xiàn)圖片左右間隔滾動特效(可自動播放)
圖片左右間隔滾動Jquery特效,點擊滾動,不點擊自動滾動,具體處理程序如下,感興趣的朋友可以參考下哈,希望可以幫助到你2013-05-05jQuery實現(xiàn)手機號正則驗證輸入及自動填充空格功能
這篇文章主要介紹了jQuery實現(xiàn)手機號正則驗證輸入及自動填充空格功能,涉及jQuery事件響應、字符串遍歷及正則判斷等相關操作技巧,需要的朋友可以參考下2018-01-01前端開發(fā)部分總結[兼容性、DOM操作、跨域等](持續(xù)更新)
在公司做這個項目已經(jīng)6個多月了,總結一些問題,也算是拋磚引玉吧,希望更多的朋友一起分享一些技巧。2010-03-03