[TOC] ## .css() #### 語法 ``` // 獲取css .css( propertyName ) //propertyName : 一個css屬性名 .css( propertyNames ) // //propertyNames : 一個或多個CSS屬性組成的一個數組 // 設置css .css( propertyName, value ) .css( propertyName, function(index, value) ) .css( properties ) // :properties 一個 屬性-值 配對的對象 ``` ### 實例 #### 獲取背景顏色的值 ``` $("#div").css("background-color") // rgb(255, 0, 0) ``` #### 獲取多個屬性 ``` $("#div").css(["width", "height", "color", "background-color"]) { background-color:"rgb(255, 0, 0)" color:"rgb(0, 0, 0)" height:"53px" width:"778px" } ``` #### 設置樣式 ``` $(this).css("color","red"); ``` #### 梯加樣式 ``` $( this ).css( "width","+=200" ); ``` #### 使用函數設置樣式 ``` // 一個寬度逐漸變大的實例 $("li").css("width",function (index,value) { console.log(value); // value為原始值 return (index+1)*'50'; }) ``` #### 突出段落中點擊文本 ``` <p> Once upon a time there was a man who lived in a pizza parlor. This man just loved pizza and ate it all the time. He went on to be the happiest man in the world. The end. </p> <script> var words = $("p:first").text().split(" ") var text = words.join("</span> <span>") $("p:first").html(text) $("span").click(function () { $(this).css("color","red") }) </script> ```