jQuery使用之設定元素樣式用法實例_jquery

本文實例講述了jQuery使用之設定元素樣式用法。分享給大家供大家參考。具體分析如下：

css是頁面不能分隔的部分，jQuery中也提供了一些css相關的實用的辦法。前面文章有使用過 addClass()為元素加入css樣式風格。這裡主要介紹jQuery如何設定頁面的樣式風格。包括新增、刪除、動態切換等。

1. 新增、刪除css類別。

複製程式碼 程式碼如下:

$(function() {
    //同時新增多個CSS類別
    $("img").addClass("css1 css2");
});

如以上程式碼對img元素添加了css1和 css2兩個樣式

removeClass與addClass方法相對應，這裡不再重複例舉。

2.在類別間動態切換。

很多時候根據使用者的操作狀態，希望某些元素的樣式風格在某個類別之間切換，時而addClass()類別，時而removeClass()類別，Jq提供了一個直接的toggleClass(name)來進行類似的操作。

複製程式碼 程式碼如下:

$(function() {
 $("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");
 });
});

css方法提供了opacity屬性。並且相容於各種瀏覽器。

如上範例修改，可以透過滑鼠事件設定p元素的透明度值。

複製程式碼 程式碼如下:

$(function() {
 $("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);
}

希望本文所述對大家的jQuery程式設計有所幫助。