最新的Web開發教程
 

jQuery - 獲取和設置CSS類


與jQuery,很容易操縱元件的CSS。



jQuery的CSS操縱

jQuery有對CSS處理的幾種方法。 我們將看看下面的方法:

  • addClass() -添加一個或多個類選擇的元素
  • removeClass() -刪除從選定的元件中的一個或多個類
  • toggleClass() -從選定的元素添加/移除類之間切換
  • css() -設置或返回樣式屬性

示例樣式表

下面的樣式將被用於本網頁上的所有的例子:

.important {
    font-weight: bold;
    font-size: xx-large;
}

.blue {
    color: blue;
}

jQuery的addClass()方法

下面的例子說明如何類屬性添加到不同的元素。 當然你也可以選擇多個元素,添加類時:

$("button").click(function(){
    $("h1, h2, p").addClass("blue");
    $("div").addClass("important");
});
試一試»

您還可以在指定範圍內多類addClass()方法:

$("button").click(function(){
    $("#div1").addClass("important blue");
});
試一試»

jQuery的removeClass()方法

下面的示例演示如何從不同的元素刪除特定的類屬性:

$("button").click(function(){
    $("h1, h2, p").removeClass("blue");
});
試一試»

jQuery的toggleClass()方法

下面的例子將展示如何使用jQuery的toggleClass()方法。 這種方法添加/從選定內容刪除類之間切換:

$("button").click(function(){
    $("h1, h2, p").toggleClass("blue");
});
試一試»

jQuery的css()方法

jQuery的css()方法將在下一章解釋。


自測練習用!

練習1» 練習2» 練習3» 練習4»


jQuery的CSS參考

對於所有的jQuery的CSS方法的完整概述,請訪問我們的jQuery HTML / CSS參考