jQuery 樣式操做

jQuery 樣式操做

設置樣式

• .css() 爲標籤添加樣式
  • .css( "屬性" , "屬性值" )
  • .css( "屬性" , "屬性值").css( "屬性" , "屬性值" )
  • .css( {"屬性" : "屬性值" } )

("#dv").css("background","red").css("background","red"); $("#dv").css( { "background" : "red" , "width" : "20px"} );

//獲取寬和高的屬性值---->數字類型 var width=("#dv").height()*2; //設置元素的寬和高--->參數能夠是數字也能夠是字符串 ("#dv").height(height);

添加樣式

• .addClass() 爲元素添加類樣式
  • addClass(" 類樣式名字 ")； 添加一個類樣式
  • addClass(" 類樣式名字1 類樣式名字2 ")； 添加多個類樣式
  • 注意：添加多個樣式的時候 中間以空格隔開

("#dv").addClass("cls_1 cls_2"); 多個樣式

移除樣式

• removeClass() 移除樣式
  • removeClass( " 類樣式名字 " )； 移除類樣式
  • removeClass( ) 移除當前元素全部的樣式

("body").removeClass();

判斷是否應用樣式

• hasClass() 判斷當前元素是否應用了某個類樣式
  • hasClass( " 類樣式名字 " )

var result=$("#dv").hasClass("cls"); 返回值爲：==true==、==false==

切換元素樣式

• toggleClass(); 切換元素的類樣式
  • toggleClass( " 類樣式名字 ");
  • 注意：該方法能夠添加和移除類樣式 屢次操做

$("body").toggleClass("cls");//切換類樣式

常見的樣式的操做

1. 獲取與設置寬高

//獲取寬和高的屬性值---->數字類型 var width=("#dv").height()*2; //設置元素的寬和高--->參數能夠是數字也能夠是字符串 ("#dv").height(height);

2. 獲取設置位置

("#dv").offset().top; $("#dv").offset({"left":200,"top":200});

3. 獲取滾動條高度

(this).scrollTop()