jQuery為元素添加樣式的方法詳解_jquery

本文實例講述了jQuery為元素添加樣式的方法。分享給大家參考，具體如下：

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","re​​d")

設定多個樣式

$("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属性

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