JQuery中操作Css樣式

來源:互聯網
上載者:User

[html] 
//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屬性 

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.