jquery设置css样式的多种方法(总结)

当我们需要在网页中设置样式时，可以使用jQuery来方便地进行操作。在jQuery中，有多种方法可以设置CSS样式。以下是这些方法的总结：

.css()

.css() 方法可以设置或返回一个或多个元素的一个或多个样式属性。使用该方法时，需要指定CSS属性名和值，以对象的形式传递：

$(selector).css(property, value)

例如，我们可以使用下面的代码设置元素的背景颜色：

$("p").css("background-color", "yellow");

.addClass()

.addClass() 方法可以向一个或多个元素添加一个或多个类名。它还可以用于切换类名。使用该方法时，需要指定类名：

$(selector).addClass(className)

例如，我们可以使用下面的代码给一个元素添加类名：

$("p").addClass("myclass");

.removeClass()

.removeClass() 方法可以从一个或多个元素中删除一个或多个类名。使用该方法时，需要指定类名：

$(selector).removeClass(className)

例如，我们可以使用下面的代码从一个元素中删除类名：

$("p").removeClass("myclass");

.toggleClass()

.toggleClass() 方法可以在添加和删除类名之间切换。使用该方法时，需要指定类名：

$(selector).toggleClass(className)

例如，我们可以使用下面的代码在一个元素中切换类名：

$("p").toggleClass("myclass");

.attr()

.attr() 方法可以设置或返回元素的属性值。使用该方法时，需要指定属性名和值，以对象的形式传递：

$(selector).attr(attribute, value)

例如，我们可以使用下面的代码设置元素的链接地址：

$("a").attr("href", "http://www.example.com");

示例说明

下面是使用 .css() 方法和 .addClass() 方法来设置元素样式的示例：

使用 .css() 方法设置元素样式

HTML 代码：

<!DOCTYPE html>
<html>
<body>

<p>Hello</p>

<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("p").css("font-size", "20px");
});
</script>

</body>
</html>

上述代码使用 .css() 方法向 <p> 元素添加 font-size 样式。

使用 .addClass() 方法设置元素样式