大多数jQuery CSS方法都不会修改jQuery对象的内容，而是用于将CSS属性应用于DOM元素。
CSS属性
使用JQuery方法应用任何CSS属性非常简单CSS(PropertyName，PropertyValue)。
selector.css( PropertyName, PropertyValue );
这里可以将PropertyName作为javascript字符串传递，根据它的值，PropertyValue可以是字符串或整数。
下面是将字体颜色添加到第二个列表项的示例。
<html>
<head>
<title>The jQuery 示例</title>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
</span><span class="tag"><script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="pln"> </span><span class="atn">language</span><span class="pun">=</span><span class="atv">"javascript"</span><span class="tag">></span><span class="pln">
$</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">ready</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
$</span><span class="pun">(</span><span class="str">"li"</span><span class="pun">).</span><span class="pln">eq</span><span class="pun">(</span><span class="lit">2</span><span class="pun">).</span><span class="pln">css</span><span class="pun">(</span><span class="str">"color"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"red"</span><span class="pun">);</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
</span><span class="tag"></script></span><span class="pln">
</head>
<body>
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</body>
</html>
这将产生以下输出-
- list item 1
- list item 2
- list item 3
- list item 4
- list item 5
- list item 6
多个CSS属性
您可以使用单个JQuery方法应用多个CSS属性CSS({key1:val1，key2:val2.)。您可以在单个调用中应用任意多个属性。
selector.css( {key1:val1, key2:val2....keyN:valN})
在这里，您可以传递key作为属性，val作为其值，如上所述。
下面是将字体颜色以及背景颜色添加到第二个列表项的示例。
<html>
<head>
<title>The jQuery 示例</title>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
</span><span class="tag"><script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="pln"> </span><span class="atn">language</span><span class="pun">=</span><span class="atv">"javascript"</span><span class="tag">></span><span class="pln">
$</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">ready</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
$</span><span class="pun">(</span><span class="str">"li"</span><span class="pun">).</span><span class="pln">eq</span><span class="pun">(</span><span class="lit">2</span><span class="pun">).</span><span class="pln">css</span><span class="pun">({</span><span class="str">"color"</span><span class="pun">:</span><span class="str">"red"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"background-color"</span><span class="pun">:</span><span class="str">"green"</span><span class="pun">});</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
</span><span class="tag"></script></span><span class="pln">
</head>
<body>
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</body>
</html>
这将产生以下输出-
- list item 1
- list item 2
- list item 3
- list item 4
- list item 5
- list item 6
设置宽高度
width(Val)和height(Val)方法可分别用于设置任何元素的宽度和高度。
下面是一个简单的示例，它设置了第一个除法元素的宽度，其余元素的宽度由样式表设置
<html>
<head>
<title>The jQuery 示例</title>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
</span><span class="tag"><script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="pln"> </span><span class="atn">language</span><span class="pun">=</span><span class="atv">"javascript"</span><span class="tag">></span><span class="pln">
$</span><span class="pun">(</span><span class="pln">document</span><span class="pun">).</span><span class="pln">ready</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
$</span><span class="pun">(</span><span class="str">"div:first"</span><span class="pun">).</span><span class="pln">width</span><span class="pun">(</span><span class="lit">100</span><span class="pun">);</span><span class="pln">
$</span><span class="pun">(</span><span class="str">"div:first"</span><span class="pun">).</span><span class="pln">css</span><span class="pun">(</span><span class="str">"background-color"</span><span class="pun">,</span><span class="pln"> </span><span class="str">"blue"</span><span class="pun">);</span><span class="pln">
</span><span class="pun">});</span><span class="pln">
</span><span class="tag"></script></span><span class="pln">
</span><span class="tag"><style></span><span class="pln">
div </span><span class="pun">{</span><span class="pln">
width</span><span class="pun">:</span><span class="lit">70px</span><span class="pun">;</span><span class="pln"> height</span><span class="pun">:</span><span class="lit">50px</span><span class="pun">;</span><span class="pln"> </span><span class="kwd">float</span><span class="pun">:</span><span class="pln">left</span><span class="pun">;</span><span class="pln">
margin</span><span class="pun">:</span><span class="lit">5px</span><span class="pun">;</span><span class="pln"> background</span><span class="pun">:</span><span class="pln">red</span><span class="pun">;</span><span class="pln"> cursor</span><span class="pun">:</span><span class="pln">pointer</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="tag"></style></span><span class="pln">
</head>
<body>
<div></div>
<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>
</body>
</html>
jQuery CSS方法
下表列出了可用于处理css属性-的所有方法
| Sr.No. | Method & Remark |
|---|---|
| 1 |
css( name ) 返回第一个匹配元素的Style属性。 |
| 2 |
css( name, value ) 将单个样式属性设置为所有匹配元素的值。 |
| 3 |
css( properties ) 将键/值对象设置为所有匹配元素的样式属性。 |
| 4 |
height( val ) 设置每个匹配元素的CSS高度。 |
| 5 |
height( ) 获取第一个匹配元素的当前计算的像素高度。 |
| 6 |
innerHeight( ) 获取第一个匹配元素的内部高度(不包括边框并包括填充)。 |
| 7 |
innerWidth( ) 获取第一个匹配元素的内部宽度(不包括边框并包括填充)。 |
| 8 |
offset( ) 获取第一个匹配元素相对于文档的当前偏移量(以像素为单位)。 |
| 9 |
offsetParent( ) 返回具有第一个匹配元素的定位父元素的jQuery集合。 |
| 10 |
outerHeight( [margin] ) 获取第一个匹配元素的外部高度(默认情况下包括边框和填充)。 |
| 11 |
outerWidth( [margin] ) 获取第一个匹配元素的外部宽度(默认情况下包括边框和填充)。 |
| 12 |
position( ) 获取元素相对于其偏移量父元素的顶部和左侧位置。 |
| 13 |
scrollLeft( val ) 当传入一个值时，所有匹配元素上的滚动左偏移都设置为该值。 |
| 14 |
scrollLeft( ) 获取第一个匹配元素的滚动左偏移量。 |
| 15 |
scrollTop( val ) 当传入一个值时，所有匹配元素上的滚动顶部偏移量都设置为该值。 |
| 16 |
scrollTop( ) 获取第一个匹配元素的滚动顶部偏移量。 |
| 17 |
width( val ) 设置每个匹配元素的CSS宽度。 |
| 18 |
width( ) 获取第一个匹配元素的当前计算的像素宽度。 |
