📅 最后修改于: 2023-12-03 14:51:59.328000 🧑 作者: Mango
当你使用jQuery来操作DOM元素时，你可能会需要改变元素的CSS样式。在这篇文章中，我们将告诉你如何使用jQuery来设置CSS样式。
为了设置CSS样式，我们可以使用css()方法。该方法的语法如下：
$(selector).css(property,value)
selector: 选择器，用于指定要改变CSS样式的元素。property: CSS属性的名称。value: CSS属性的值。下面是一个简单的实例，展示了如何使用jQuery来改变元素的背景颜色：
<!DOCTYPE html>
<html>
<head>
<title>jQuery 设置 CSS 样式</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
div{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div></div>
<script>
$("div").css("background-color","#F00");
</script>
</body>
</html>
该代码会将 <div> 元素的背景颜色设为红色。
如果你需要改变多个CSS属性，那么可以使用CSS对象来设置CSS。CSS对象是一个包含CSS属性和对应值的JavaScript对象。
$(selector).css({
property1: value1,
property2: value2,
......
});
下面的代码展示了如何使用CSS对象来改变元素的CSS样式。
<!DOCTYPE html>
<html>
<head>
<title>jQuery 设置 CSS 样式</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
div{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div></div>
<script>
$("div").css({
"background-color": "#F00",
"border-radius": "50%",
"box-shadow": "5px 5px 5px #888"
});
</script>
</body>
</html>
该代码会将 <div> 元素的背景颜色设为红色，并且将其CSS圆角设置为50%以及添加一个灰色的阴影效果。
使用jQuery设置元素的CSS样式非常简单，可以通过css()方法来完成。如果需要改变多个CSS属性，可以使用CSS对象来实现。
现在，你已经学会了如何使用jQuery设置CSS样式。如果你还有疑问，欢迎在评论区留言。