通过jQuery内的CSS样式操作方法,可以访问或设置DOM元素的级联样式
1、css(key, value) 在所有匹配的元素中,设置一个样式属性的值。
示例:
把所有段落的color样式属性值改为红色。
$("p").css("color","red");
HTML 代码:
<p>Test Paragraph.</p>
结果:
<p style="color:red;">Test Paragraph.</p>
2、css(name) 访问第一个匹配元素的样式属性。使用这个方法可以很容易地取得第一个匹配元素的样式属性的值。
示例:
取得第一个段落的color样式属性的值。
$("p").css("color");
HTML 代码:
<p style="color:red;">Test Paragraph.</p>
结果:
"red"
3、css(properties) 把一个“名/值对”对象设置为所有匹配元素的样式属性。 这是一种在所有匹配的元素上设置大量样式属性的最佳方式。
示例:
为所有p元素设置color和background样式属性。
$("p").css({ color: "red", background: "blue" });
HTML 代码:
<p>Test Paragraph.</p>
结果:
<p style="color:red; background:blue;">Test Paragraph.</p>
4、height(val) 为每个匹配的元素设置CSS高度(width)属性的值。如果没有明确指定单位(如:em或%),使用px。
示例:
$("p").height(20);
HTML 代码:
<p>This is just a test.</p>
结果:
<p style="height:20px;">This is just a test.</p>
$("p").height("20em");
HTML 代码:
<p>This is just a test.</p>
结果:
<p style="height:20em;">This is just a test.</p>
5、height() 取得第一个匹配元素当前计算的高度值(px)。
示例:
$("p").height();
HTML 代码:
<p>This is just a test.</p>
结果:
300
6、width(val) 为每个匹配的元素设置CSS宽度(width)属性的值。如果没有明确指定单位(如:em或%),使用px。
示例:
$("p").width(20);
HTML 代码:
<p>This is just a test.</p>
结果:
<p style="width:20px;">This is just a test.</p>
示例:
$("p").width("20em");
HTML 代码:
<p>This is just a test.</p>
结果:
<p style="width:20em;">This is just a test.</p>
7、width() 取得第一个匹配元素当前计算的宽度值(px)。
示例:
$("p").width();
HTML 代码:
<p>This is just a test.</p>
结果:
300