JQuery css()
JQuery css()
JQuery CSS()方法用于获取(返回)或设置所选元素的样式属性或值。它有助于您获得一个或多个样式属性。
JQuery CSS()方法提供了两种方法:
1)返回CSS属性
它用于获取a的值指定的CSS属性。
语法:
让我们以一个示例来演示此属性。
<!DOCTYPE html>
<html>
<head>
<script src="/ajax/libs/JQuery/1.11.3/JQuery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Background color = " + $("p").css("background-color"));
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p style="background-color:#ff0000">此段的背景颜色是红色。</p>
<p style="background-color:#00ff00">此段的背景颜色为绿色。</p>
<p style="background-color:#0000ff">此段的背景颜色为蓝色。</p>
<button>单击此处获取第一个匹配元素的背景颜色</button>
</body>
</html>
输出:
这是标题
此段的背景颜色是红色。
此段的背景颜色为绿色。
此段的背景颜色为蓝色。
注意: 上面的示例返回第一个匹配元素的背景色值。
2)设置CSS属性
此属性用于为所有匹配的元素设置特定值。
语法:
css("propertyname","value");
<!DOCTYPE html>
<html>
<head>
<script src="/ajax/libs/JQuery/1.11.3/JQuery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color", "violet");
});
});
</script>
</head>
<body>
<p style="background-color:#ff0000">此段的背景颜色为红色。</</p>
<p style="background-color:#00ff00">此段落的背景颜色为绿色。</</p>
<p style="background-color:#0000ff">此段落的背景颜色为蓝色。</</p>
<p>此段落没有背景色。</p>
<button>单击此处设置所有匹配元素的特定背景颜色</button>
</body>
</html>
输出:
此段的背景颜色为红色。
此段落的背景颜色为绿色。
此段落的背景颜色为蓝色。
此段落没有背景色。
3)设置多个CSS属性
Set CSS属性的扩展。它有助于您将多个属性值添加在一起。
语法:
css({"propertyname":"value","propertyname":"value",...});
让我们以一个示例来演示此属性。在此示例中，我们为所有元素添加两个属性background-color和font-size。
<!DOCTYPE html>
<html>
<head>
<script src="/ajax/libs/JQuery/1.11.3/JQuery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color": "yellow", "font-size": "200%"});
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p style="background-color:#ff0000">此段的背景颜色为红色。</p>
<p style="background-color:#00ff00">此段落的背景颜色为绿色。</p>
<p style="background-color:#0000ff">此段落的背景颜色为蓝色。</p>
<p>此段落没有背景色。</p>
<button>单击此处为所有选定的元素设置多种样式。</button>
</body>
</html>
输出:
此段的背景颜色为红色。
此段落的背景颜色为绿色。
此段落的背景颜色为蓝色。
此段落没有背景色。
