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叠加；

• • 设置多个元素多个样式不同值

$("div").css({
            50,
            height:function(index){
                return (index+1)*50;
            },
            backgroundColor:function(){
                //返回随机颜色
                return "#"+Math.floor(Math.random()*0x1000000).toString(16).padStart(6,"0"); 
            }
        });

css方法可以接收一个函数，设置多个样式；

上面代码表示：将div元素的宽设置为50px，高设置以50px叠加，并且把每一个div的背景色设置为随机颜色；

• 获取样式
  • 获取元素的一个CSS属性值

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

只能获取到匹配到的第一个元素样式的值，并且该值为字符串类型；

上面代码表示：获取第一个div元素的高度，返回一个带px的字符串类型的值；

• • 获取元素的多个css属性值

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

css方法可以接收一个数组，并且遍历该数组的所有样式；

上面代码表示：获取第一个div的宽高和背景色属性值；

• • 获取多个元素的一个css属性值

可以使用数组遍历的方法

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

上面代码表示：把遍历所有匹配到的div，并且把属性值追加到数组中，打印数组。

• • 获取多个元素的多个css属性值

var arr=[];
    $("div").each(function(){
        arr.push({});
    }).css({
        function(index,item){
            arr[index].width=item;
        },
        height:function(index,item){
            arr[index].height=item;
        },
        backgroundColor:function(index,item){
            arr[index].backgroundColor=item;
        }
    })
 console.log(arr);

上面代码表示：遍历所有的div元素，并且在arr数组中添加一个空对象，把获取的宽高和背景色当做键值对填入到对象中，并且打印数组，得到所有div指定的多个样式。

index表示所有div的索引值，item表示该样式的值；

总结：

1. 设置样式时，如果是宽高位移等大小距离的属性值，可以直接写数值型，默认单位为px。
2. 获取样式时，可以获取内部样式、行内样式和外部样式，获取的都是最终呈现的状态；使用css方法获取的宽高位移等大小距离时，获取的结果都为带px的字符串类型；