[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> ```