jQuery中深刻css方法

在學習jQuery過程當中，我總結出css方法一些須要注意的點和新的知識須要學習的知識；

• 設置樣式
  
  • 設置單個樣式

設置時，如寬高字體大小等，能夠直接寫數值型，默認單位爲px；

$("div").css("width",50);
$("div").css("width","50px");

• • 設置多個元素同個樣式不一樣值

$("div").css("width",function(index,item){
            // item是當前元素的寬度
            return 50*(index+1);
        })

jQuery中css方法第二個參數能夠是回調函數，返回的值至關於設置的值；

函數的兩個參數第一個表明當前元素的索引值，第二個表明當前設置的樣式；

上面代碼表示：設置div元素的寬度以50px疊加；

• • 設置多個元素多個樣式不一樣值

 1 $("div").css({
 2             width:50,
 3             height:function(index){
 4                 return (index+1)*50;
 5             },
 6             backgroundColor:function(){
 7                 //返回隨機顏色
 8                 return "#"+Math.floor(Math.random()*0x1000000).toString(16).padStart(6,"0"); 
 9             }
10         });

css方法能夠接收一個函數，設置多個樣式；

上面代碼表示：將div元素的寬設置爲50px，高設置以50px疊加，而且把每個div的背景色設置爲隨機顏色；

• 獲取樣式
  • 獲取元素的一個CSS屬性值

console.log($("div").css("height"));

只能獲取到匹配到的第一個元素樣式的值，而且該值爲字符串類型；

上面代碼表示：獲取第一個div元素的高度，返回一個帶px的字符串類型的值；

• • 獲取元素的多個css屬性值

console.log($("div").css(["width","height","backgroundColor"]))

css方法能夠接收一個數組，而且遍歷該數組的全部樣式；

上面代碼表示：獲取第一個div的寬高和背景色屬性值；

• • 獲取多個元素的一個css屬性值

能夠使用數組遍歷的方法

1 var arr=[];
2         $("div").css("height",function(index,item){
3             arr.push(item);
4         });
5 console.log(arr);

上面代碼表示：把遍歷全部匹配到的div，而且把屬性值追加到數組中，打印數組。

• • 獲取多個元素的多個css屬性值

 1 var arr=[];
 2     $("div").each(function(){
 3         arr.push({});
 4     }).css({
 5         width:function(index,item){
 6             arr[index].width=item;
 7         },
 8         height:function(index,item){
 9             arr[index].height=item;
10         },
11         backgroundColor:function(index,item){
12             arr[index].backgroundColor=item;
13         }
14     })
15  console.log(arr);

上面代碼表示：遍歷全部的div元素，而且在arr數組中添加一個空對象，把獲取的寬高和背景色當作鍵值對填入到對象中，而且打印數組，獲得全部div指定的多個樣式。

index表示全部div的索引值，item表示該樣式的值；

 

總結：

1. 設置樣式時，若是是寬高位移等大小距離的屬性值，能夠直接寫數值型，默認單位爲px。
2. 獲取樣式時，能夠獲取內部樣式、行內樣式和外部樣式，獲取的都是最終呈現的狀態；使用css方法獲取的寬高位移等大小距離時，獲取的結果都爲帶px的字符串類型；