獲取一個屬性值

獲取一個屬性值時，直接傳入這個屬性的名字即可。例如我們要獲取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

當然了，既然是 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)