jQuery教程之css() - 获取元素的一个或多个css属性值

获取一个属性值

获取一个属性值时，直接传入这个属性的名字即可。例如我们要获取li这个元素的宽度，那么可以这样获取：

var liWidth = $('li').css('width') ;

console.log('li的宽度为：' + liWidth ) ;

可以在控制台看到如下输出结果：

li的宽度为：30px

获取多个属性值

获取多个属性值时，可以传入一个数组，该数组为属性名字的集合。例如我们要获取li这个元素的宽度、背景色、高度三个属性值，那么可以这样获取：

var styles = $('.active').css(['width' , 'height' , 'backgroundColor']) ;

console.log( '获取到的宽度值为：' + styles.width ) ;
console.log( '获取到的高度值为：' + styles.height ) ;
console.log( '获取到的背景色为：' + styles.backgroundColor ) ;

最后我们会用styles这个变量接收到一个json数据对象。
我们会在控制台看到如下信息：

获取到的宽度值为：1238px
获取到的高度值为：18px
获取到的背景色为：rgb(255, 255, 255)

需要注意的一点是，我们获取background-color这个属性时，可以使用驼峰规则来写属性名字： backgroundColor 。这样我们获取到json数据后，可以使用 styles.backgroundColor来取值。

当然了，既然是 styles 是一个json数据对象，那么我们也可以使用 $.each()进行遍历：

var styles = $('.active').css(['width' , 'height' , 'backgroundColor']) ;

$.each( styles , function( key , value ){
     console.log( '获取到的属性为：' + key + ",该属性的值为：" + value ) ;
}) ;

在控制台可以看到输出内容为：

获取到的属性为：width,该属性的值为：1255px
获取到的属性为：height,该属性的值为：18px
获取到的属性为：backgroundColor,该属性的值为：rgb(255, 255, 255)