JQuery操作屬性、樣式、風格(attr、class、css)

樣式操作

<p class=”myclass” title=”選擇喜歡的水果”>你最喜歡的水果是?</p>

在上面代碼中，class也是p元素的屬性，因此獲取class和設置class都可以用attr()方法來完成

代碼如下：

var p_class=$("p").attr("class"); //獲取p元素的class

也可以用attr()方法來設置class

$("p").attr("class","high"); //將p元素的class設置為high

在大多數情況下，它是將原來的class替換成新的class，而不是在原來基礎上追加新的class

新的代碼為

<p class="high" title="選擇喜歡的水果">你最喜歡的水果是?</p>

追加樣式

<style>         

.another {             

Font-style: italic; /* 斜體 */             

Color: blue;/* 字體設為藍色 */         

}     

</style>

在網頁中追加一個樣式

$("input:eq(2)").click(function(){             $("p").addclass("another");         })

方法

addClass()

attr()

對同一個網頁操作

<p>test</p>

第一次使用方法

 $("p").addClass("high");  $("p").attr("class","high")

第一次結果

<p class="high">test</p>;

再次使用方法

$("p").addClass("another");
$("p").attr("class", "another")

結果

<p class="high another">test</p>
<p class="another">test</p>

移除樣式 removeClass()

$("p").removeClass("high");

結果

<p class="another">test</p>

將p兩個類都移除

$("p").removeclass("high") .removeClass("another");

或者

$("p").removeClass();或者 $("p").removeClass("high another");或者 $("p").removeAttr("class");//移除class屬性 

結果

<p>test</p> 

移除樣式 也可以用 removeAttr()。主要指移除屬性

 $("p").removeAttr("class");//移除class屬性

切換樣式

Jquery提供toggleClass()方法控制樣式的切換

$("p").toggleClass("another"); //對設置或移除被選元素的一個或多個類進行切換。該方法檢查每個元素中指定的類。如果不存在則添加類，如果已設置則刪除之。這就是所謂的切換效果

判斷是否包含某樣式，如果有 返回true 否則 返回 false

$("p").hasClass("another"); //相當於$("p").is(".another"); 

判對Class中或者說Style中的具體樣式操作，可以使用css(),方法，例如

<p style="color:red">test</p>

如果修改color的值為blue，代碼如下

 $("p").css("color", "blue")