📅 最后修改于: 2023-12-03 15:38:04.055000 🧑 作者: Mango
在网页开发中，动态地向元素添加 CSS 属性是一个经常用到的操作。使用 jQuery 可以轻松地实现这个功能。
在 jQuery 中，可以通过 css() 方法来向元素添加 CSS 属性。其语法如下：
$(selector).css(propertyname, value);
其中，selector 表示要操作的元素选择器，propertyname 表示要添加的 CSS 属性名，value 表示要添加的属性值。
例如，将一个 div 元素的背景颜色设置为红色，可以使用如下代码：
$("div").css("background-color", "red");
如果要添加多个属性，可以多次使用 css() 方法，也可以在一个方法中添加多个属性，如下所示：
$("div").css({
"background-color": "red",
"font-size": "16px",
"color": "green"
});
下面是一个完整的示例代码，点击按钮后将文本框的背景颜色和字体颜色都改变：
<!DOCTYPE html>
<html>
<head>
<title>jQuery 示例</title>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="text" id="myInput">
<button id="myButton">改变颜色</button>
<script>
$(document).ready(function(){
$("#myButton").click(function(){
$("#myInput").css({
"background-color": "yellow",
"color": "blue"
});
});
});
</script>
</body>
</html>
在代码中，我们首先引入了 jQuery 库，然后在 ready 方法中定义了一个点击事件，当按钮被点击时，将文本框的背景颜色和字体颜色都改变。
使用 jQuery 的 css() 方法可以动态地向元素添加 CSS 属性。在添加属性时，可以多次使用 css() 方法，或者在一个方法中添加多个属性。在实际开发中，这个方法可以用来实现许多效果，比如改变元素的颜色、大小、边框等。