通過js獲取dom元素上的style屬性，我們可以動態的給元素賦予樣式屬性。在jQuery中我們要動態的修改style屬性我們只要使用.css()方法就可以實現了。
.css()方法：獲取元素樣式屬性的計算值或者設置元素的css屬性
獲取：
1 .css(propertyName):獲取匹配元素集合中的第一個元素的樣式屬性的計算值
2 .css(propertyNames)：傳遞一組數組，返回一個對象結果
設置：
1 .css（propertyName,value: 設置css
2 .css（propertyName,function) 可以傳入一個回調函數，返回取得對相應的值進行處理
3 .css (properties):可以傳入一個對象，同時設置多個樣式
<body>
<h3>獲取css屬性</h3>
<div class="first">獲取顏色</div>
<p></p>
<div class="second">獲取文字尺寸</div>
<p></p>
<div class="third">獲取寬高尺寸</div>
<p></p>
<script type="text/javascript">
//background-color:blue; => rgb(0, 0, 255)
//顏色都會轉化成統一的rgb標示
$('p:eq(0)').text( $('.first').css("background-color") )
</script>
<script type="text/javascript">
//字體大小都會轉化成統px大小 em=>px
$('p:eq(1)').text( $('.first').css("font-size") )
</script>
<script type="text/javascript">
//獲取尺寸，傳入CSS屬性組成的一個數組
//{width: "60px", height: "60px"}
var value = $('.first').css(['width','height']);
//因為獲取的是一個對象，取到對應的值
$('p:eq(2)').text( 'widht:' + value.width + ' height:' +value.height )
</script>
</br></br></br>
<h3>設置css屬性</h3>
<div class="fourth">設置顏色設置文字尺寸</div>
<div class="fifth">設置顏色設置文字尺寸</div>
<div class="sixth">通過回調設置新的值</div>
<div class="seventh">同時設置多少個樣式</div>
<script type="text/javascript">
//多種寫法設置顏色
$('.fourth').css("background-color","red")
$('.fifth').css("background-color","yellow")
</script>
<script type="text/javascript">
//多種寫法設置字體大小
$('.fourth').css("font-size","15px")
$('.fifth').css("fontSize","0.9em")
</script>
<script type="text/javascript">
//獲取到指定元素的寬度，在回調返回寬度值
//通過處理這個value，重新設置新的寬度
$('.sixth').css("width",function(index,value){
value = value.split('px');
return (Number(value[0]) + 50) + value[1];
})
</script>
<script type="text/javascript">
//合并設置,通過對象傳設置多個樣式
$('.seventh').css({
'font-size':"15px",
"background-color":"#40E0D0",
"border":"1px solid red"
})
</script>
</body>
