JQuery中操作Css樣式的方法
JQuery中操作Css樣式的方法
<strong>//1、獲取和設定樣式</strong>
$(“#tow”).attr(“class”)獲取ID為tow的class屬性
$(“#two”).attr(“class”,”divClass”)設定Id為two的class屬性。
<strong>//2、追加樣式</strong>
$(“#two”).addClass(“divClass2”)為ID為two的物件追加樣式divClass2
<strong>//3、移除樣式</strong>
$(“#two”).removeClass(“divClass”)移除 ID為two的物件的class名為divClass的樣式。
$(#two).removeClass(“divClass divClass2”)移除多個樣式。
<strong>//4、切換類名</strong>
$(“#two”).toggleClass(“anotherClass”) //重複切換anotherClass樣式
<strong>//5、判斷是否含有某項樣式</strong>
$(“#two”).hasClass(“another”)==$(“#two”).is(“.another”);
<strong>//6、獲取css樣式中的樣式</strong>
$(“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”)
<strong>//7.offset()方法</strong>
//它的作用是獲取元素在當前視窗的相對偏移,其中返回物件包含兩個屬性,即top和left 。
//注意:只對可見元素有效。
var offset=$(“div”).offset();
var left=offset.left; //獲取左偏移
var top=offset.top; //獲取右偏移
//8、position()方法
//它的作用是獲取元素相對於最近的一個position樣式屬性設定為relative或者absolute的祖父節點的相對偏移,與offset()一樣,它返回的物件也包括兩個屬性即top和left。
<strong>//9、scrollTop()方法和scrollLeft()方法</strong>
$(“div”).scrollTop(); //獲取元素的滾動條距頂端的距離。
$(“div”).scrollLeft(); //獲取元素的滾動條距左側的距離。
<strong>//10、jQuery中的 toggle和slideToggle 方法,都可以實現對一個元素的顯示和隱藏。區別是:</strong>
//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屬性
轉載:http://www.jb51.net/article/46689.htm
相關文章
- jQuery 樣式操作jQuery
- 使用jquery操作元素的css樣式(獲取、修改等等)jQueryCSS
- jQuery如何使用css方法修改單個樣式?jQueryCSS
- JQuery屬性與樣式——樣式操作.css()和元素資料的儲存.data()jQueryCSS
- jquery css()方法設定元素的樣式簡單介紹jQueryCSS
- css3中的zoom屬性以及jquery中css()方法操作元素的屬性CSSS3OOMjQuery
- jQuery操作iframe中js函式的方法小結jQueryJS函式
- jQuery獲取CSS樣式中的顏色值的問題jQueryCSS
- jQuery使用css()方法改變元素樣式程式碼例項jQueryCSS
- jquery給元素新增樣式表的方法jQuery
- jquery設定元素css樣式的幾種方式jQueryCSS
- (JavaScript學習記錄):jQuery 樣式操作JavaScriptjQuery
- Jquery獲取css中id和class樣式的動作-#id和.classjQueryCSS
- jQuery中css()和attr()方法的區別jQueryCSS
- css中:not()選擇器和jQuery中.not()方法CSSjQuery
- jQuery css() 方法jQueryCSS
- jQuery css()方法jQueryCSS
- jquery實現的操作class樣式類簡單介紹jQuery
- CSS中的各個選擇節點,都有樣式最後一個無樣式的快捷解決方法CSS
- CSS的基本樣式CSS
- jQuery HTML / CSS 方法jQueryHTMLCSS
- css樣式CSS
- js中的寫出想jquery中的函式一樣呼叫JSjQuery函式
- jQuery知識總結之元素屬性與樣式的操作jQuery
- jQuery中的DOM操作jQuery
- jquery 中的dom操作jQuery
- CSS中position樣式的一些特殊用法CSS
- 常用CSS樣式2:其它樣式CSS
- 常用CSS樣式1:文字樣式CSS
- CSS系列:CSS常用樣式CSS
- CSS系列:CSS文字樣式CSS
- CSS系列:CSS表格樣式CSS
- css樣式常用的樣式以及選擇器CSS
- css樣式的組成CSS
- CSS重置樣式CSS
- css字型樣式CSS
- css背景樣式CSS
- jQuery基礎DOM和CSS操作jQueryCSS