使用 jQuery 从 div 添加多个样式属性

使用 jQuery 可以方便地使用 JavaScript 来动态地修改 HTML 文档的样式。本文将介绍如何使用 jQuery 从一个 div 元素中添加多个样式属性。

准备工作

在使用 jQuery 之前，需要先引入 jQuery 库。可以使用以下代码引入 jQuery：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

引入 jQuery 库后，就可以开始使用 jQuery 来操作 DOM。

添加样式属性

要添加多个样式属性，可以使用 css 方法。css 方法可以以键值对的形式接受多个样式属性，如下所示：

$("div").css({
  "background-color": "red",
  "color": "white",
  "font-size": "20px"
});

上面的代码将选中所有 div 元素，并设置它们的背景色、文字颜色和字体大小。

将代码放入函数中

如果希望在特定事件触发时添加样式属性，可以将上面的代码放入一个函数中，并在事件处理程序中调用该函数，如下所示：

function addStyles() {
  $("div").css({
    "background-color": "red",
    "color": "white",
    "font-size": "20px"
  });
}

$("button").click(addStyles);

上面的代码将在点击按钮时触发 addStyles 函数，并添加样式属性。

总结

使用 jQuery 可以方便地添加多个样式属性。可以使用 css 方法以键值对的形式添加样式属性。如果希望在特定事件触发时添加样式属性，可以将代码放入一个函数中，并在事件处理程序中调用该函数。