本文實例講述了jQuery使用之設置元素樣式用法。分享給大家供大家參考。具體分析如下：
css是頁面不能分隔的部分，jQuery中也提供了一些css相關的實用的辦法。前面文章中有使用過 addClass()為元素添加css樣式風格。這里主要介紹jQuery如何設置頁面的樣式風格。包括添加、刪除、動態切換等。
1. 添加、刪除css類別。
復制代碼代碼如下:
$(function() {
//同時添加多個CSS類別
$("img").addClass("css1 css2");
});
//同時添加多個CSS類別
$("img").addClass("css1 css2");
});
如以上代碼對img元素添加了css1和 css2兩個樣式
removeClass與addClass方法相對應，這里不再重復例舉。
2.在類別間動態切換。
很多時候根據用戶的操作狀態，希望某些元素的樣式風格在某個類別之間切換，時而addClass()類別，時而removeClass()類別，Jq提供了一個直接的toggleClass(name)來進行類似的操作。
復制代碼代碼如下:
$(function() {
$("p").click(function() {
$(this).toggleClass("css1");
})
});
$("p").click(function() {
$(this).toggleClass("css1");
})
});
以上代碼實現了點擊P元素時，對css1樣式不斷切換。toggleClass(name)方式只能設定一種css類別。不能對多個css進行切換。
3.直接獲取、設置樣式。
與attr()方法完全類似，jQuery提供了css()方法直接獲取、設置元素的樣式風格，比如使用css(name)獲取某種樣式的風格值。通過css(properties)列表來同事設置多種樣式，通過css(name,value)設置元素的某種樣式。
例如：通過設置鼠標mouseover和mouseout事件觸發css(name,value)來修改顏色標記。
復制代碼代碼如下:
$(function() {
$("p").mouseover(function() {
$(this).css("color", "red");
});
$("p").mouseout(function() {
$(this).css("color", "black");
});
});
$("p").mouseover(function() {
$(this).css("color", "red");
});
$("p").mouseout(function() {
$(this).css("color", "black");
});
});
css方法提供了opacity屬性。并且兼容各種瀏覽器。
如上例子修改，可以通過鼠標事件設置p元素的透明度值。
復制代碼代碼如下:
$(function() {
$("p").mouseover(function() {
$(this).css("opacity", "0.5");
});
$("p").mouseout(function() {
$(this).css("opacity", "1");
});
});
$("p").mouseover(function() {
$(this).css("opacity", "0.5");
});
$("p").mouseout(function() {
$(this).css("opacity", "1");
});
});
另外在css中提供了hasClass(name)方法判斷某個元素是否設置了某個css類別。返回布爾值。例如:
復制代碼代碼如下:
$("li:last").hasClass("css1")
表達最后一個li的css屬性是否包含css1類。和
復制代碼代碼如下:
$("li:last").is(".css1")
代碼效果完全相同。
查看jQuery源碼，hasClass方法就是調運is()方法。
復制代碼代碼如下:
hasClass: function(selector) {
return this.is("." + selector);
}
return this.is("." + selector);
}
希望本文所述對大家的jQuery程序設計有所幫助。
