JQuery中操作Css樣式的方法

JQuery中操作Css樣式的方法

 本篇文章主要是對JQuery中操作Css樣式的方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所協助

 代碼如下:

//1、擷取和設定樣式

 

$("#tow").attr("class")擷取ID為tow的class屬性

 

$("#two").attr("class","divClass")設定Id為two的class屬性。

 

//2、追加樣式

 

$("#two").addClass("divClass2")為ID為two的對象追加樣式divClass2

 

//3、移除樣式

 

$("#two").removeClass("divClass")移除 ID為two的對象的class名為divClass的樣式。

 

$(#two).removeClass("divClass divClass2")移除多個樣式。

 

//4、切換類名

 

$("#two").toggleClass("anotherClass") //重複切換anotherClass樣式

 

//5、判斷是否含有某項樣式

 

$("#two").hasClass("another")==$("#two").is(".another");

 

//6、擷取css樣式中的樣式

 

$("div").css("color") 設定color屬性值. $(element).css(style)

 

//設定單個樣式

 

$("div").css("color","red")

 

//設定多個樣式

 

$("div").css({fontSize:"30px",color:"red"})

 

$("div").css("height","30px")==$("div").height("30px")

 

$("div").css("width","30px")==$("div").height("30px")

 

//7.offset()方法

 

//它的作用是擷取元素在當前視窗的相對位移，其中返回對象包含兩個屬性,即top和left 。

 

//注意：只對可見元素有效。

 

var offset=$("div").offset();

 

var left=offset.left;         //擷取左位移

 

var top=offset.top;        //擷取右位移

 

//8、position()方法

 

//它的作用是擷取元素相對於最近的一個position樣式屬性設定為relative或者absolute的祖父節點的相對位移，與offset()一樣，它返回的對象也包括兩個屬性即top和left。

 

//9、scrollTop()方法和scrollLeft()方法

 

$("div").scrollTop();        //擷取元素的捲軸距頂端的距離。

 

$("div").scrollLeft();         //擷取元素的捲軸距左側的距離。

 

//10、jQuery中的 toggle和slideToggle 方法，都可以實現對一個元素的顯示和隱藏。區別是：

 

//toggle：動態效果為從右至左。橫向動作。

 

//slideToggle：動態效果從下至上。豎向動作。

 

//比如想實現一個樹由下至上收縮的動態效果，就使用slideToggle就ok了。

 

$('input').attr("readonly",true)//將input元素設定為readonly

$('input').attr("readonly",false)//去除input元素的readonly屬性

$('input').attr("disabled",true)//將input元素設定為disabled

$('input').attr("disabled",false)//去除input元素的disabled屬性