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的字符串类型；