jquery 样式获取设置值_jQuery 获取跟设置匹配元素样式属性值css

jQuery 获取和设置匹配元素样式属性值css

通过jQuery内的CSS样式操作方法，可以访问或设置DOM元素的级联样式

1、css(key, value)

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

示例:

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

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

HTML 代码:

Test Paragraph.

结果:

Test Paragraph.

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

示例:

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

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

HTML 代码:

Test Paragraph.

结果:

"red"

3、css(properties) 把一个“名/值对”对象设置为所有匹配元素的样式属性。 这是一种在所有匹配的元素上设置大量样式属性的最佳方式。

示例:

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

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

HTML 代码:

Test Paragraph.

结果:

Test Paragraph.

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

示例:

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

HTML 代码:

This is just a test.

结果:

This is just a test.

示例:

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

HTML 代码:

This is just a test.

结果:

This is just a test.

5、height() 取得第一个匹配元素当前计算的高度值(px)。

示例:

$("p").height();

HTML 代码:

This is just a test.

结果:

300

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

示例:

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

HTML 代码:

This is just a test.

结果:

This is just a test.

示例:

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

HTML 代码:

This is just a test.

结果:

This is just a test.

7、width() 取得第一个匹配元素当前计算的宽度值(px)。

示例:

$("p").width();

HTML 代码:

This is just a test.

结果:

300