這篇文章主要介紹怎樣設置或取得元素的CSS class的相關內容,下面我們就與大家一起分享。
jQuery支持方法用來操作HTML元素的CSS 屬性
下面的方法為jQuery 提供的CSS操作方法:
addClass() – 為指定的元素添加一個或多個CSS類。
removeClass() – 為指定的元素刪除一個或多個CSS類。
toggleClass() – 為指定的元素在添加/刪除CSS類之間切換。
css() -設置或是取得CSS類型屬性。
下面的StyleSheet為後面例子使用的CSS風格:
[css]
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
jQuery addClass示例
下面的例子為給定的元素添加CSS風格類
[html]
Heading 1Heading 2
This is a paragraph.
This is another paragraph.
This is some important text!
Heading 2
This is a paragraph.
This is another paragraph.
This is some important text!
你也可以在addClass 添加多個類的名稱,如:
[javascript]
$("button").click(function(){
$("#div1").addClass("important blue");
});
$("button").click(function(){
$("#div1").addClass("important blue");
});
jQuery removeClass 示例
[javascript]
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
jQuery toggle()示例,下面的例子使用toggle為HTML元素在添加/刪除CSS類blue之間切換
[javascript]
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
以上就是我們為大家准備的怎樣設置或取得元素的CSS class的相關內容,希望對大家可以有所幫助。