1. 程式人生 > >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屬性