jQuery（三）-----CSS

3. CSS

3.1 css(name)

访问第一个匹配元素的样式属性。 使用这个方法可以很容易地取得第一个匹配元素的样式属性的值。

Access a style property on the first matched element. This method makes it easy to retrieve a style property value 

from the first matched element.

返回值

String

参数

name (String): 要访问的属性名称

示例

说明:

取得第一个段落的color样式属性的值。

HTML 代码:

<p style="color:red;">Test Paragraph.</p>

jQuery 代码:

$("p").css("color");

结果:

"red"

说明:

取得第一个段落的font-weight样式属性的值。

HTML 代码:

<p style="font-weight: bold;">Test Paragraph.</p>

jQuery 代码:

$("p").css("font-weight");

结果:

"bold"

3.2 css(properties)

把一个“名/值对”对象设置为所有匹配元素的样式属性。

这是一种在所有匹配的元素上设置大量样式属性的最佳方式。

Set a key/value object as style properties to all matched elements.

This serves as the best way to set a large number of style properties on all matched elements.

返回值

jQuery

参数

properties (Map): 要设置为样式属性的名/值对对象

示例

说明:

为所有p元素设置color和background样式属性。

HTML 代码:

<p>Test Paragraph.</p>

jQuery 代码:

$("p").css({ color: "red", background: "blue" });

结果:

<p style="color:red; background:blue;">Test Paragraph.</p>

3.3 css(key, value)

在所有匹配的元素中，设置一个样式属性的值。

Set a single style property to a value, on all matched elements.

返回值

jQuery

参数

key (String): 要设置的样式属性名称

value (Object): 要设置的样式属性的值

示例

说明:

把所有段落的color样式属性值改为红色。

HTML 代码:

<p>Test Paragraph.</p>

jQuery 代码:

$("p").css("color","red");

结果:

<p style="color:red;">Test Paragraph.</p>

说明:

把所有段落的left样式属性值设置为"30px"

HTML 代码:

<p>Test Paragraph.</p>

jQuery 代码:

$("p").css("left",30);

结果:

<p style="left:30px;">Test Paragraph.</p>

3.4 height()

取得第一个匹配元素当前计算的高度值（px）。

Get the current computed, pixel, height of the first matched element.

返回值

String

示例

HTML 代码:

<p>This is just a test.</p>

jQuery 代码:

$("p").height();

结果:

300

3.5 height(val)

为每个匹配的元素设置CSS高度(width)属性的值。 如果没有明确指定单位（如：em或%），使用px。

Set the CSS width of every matched element. If no explicit unit was specified (like 'em' or '%') then "px" is added 

to the width.

返回值

jQuery

参数

val (String|Number): 要设置的高度值

示例

HTML 代码:

<p>This is just a test.</p>

jQuery 代码:

$("p").height(20);

结果:

<p style="height:20px;">This is just a test.</p>

HTML 代码:

<p>This is just a test.</p>

jQuery 代码:

$("p").height("20em");

结果:

<p style="height:20em;">This is just a test.</p>

3.6 width()

取得第一个匹配元素当前计算的宽度值（px）。

Get the current computed, pixel, width of the first matched element.

返回值

String

示例

HTML 代码:

<p>This is just a test.</p>

jQuery 代码:

$("p").width();

结果:

300

3.7 width(val)

为每个匹配的元素设置CSS宽度(width)属性的值。 如果没有明确指定单位（如：em或%），使用px。

Set the CSS width of every matched element. If no explicit unit was specified (like 'em' or '%') then "px" is added 

to the width.

返回值

jQuery

参数

val (String|Number): 要设置的宽度值

示例

HTML 代码:

<p>This is just a test.</p>

jQuery 代码:

$("p").width(20);

结果:

<p style="width:20px;">This is just a test.</p>

HTML 代码:

<p>This is just a test.</p>

jQuery 代码:

$("p").width("20em");

结果:

<p style="width:20em;">This is just a test.</p>