如何使用 jQuery 为元素添加和移除 CSS 类?

cssjqueryweb developmentfront end technology更新于 2024/3/15 10:52:17

CSS 类在网页设计中起着至关重要的作用，对网页的整体外观有着显著的影响。由于人们越来越重视页面的美观，动态自定义网页可以极大地提升其价值。乍一看，这项任务可能令人望而生畏，但使用 jQuery，可以轻松地实时从 HTML 元素中附加或提取 CSS 类，从而提供一种快速简便的方法来创建交互式动态网页。通过添加或移除 CSS 类，我们可以根据用户操作或页面事件即时重新调整元素的呈现方式，从而改进网页的自定义性和用户友好性。

addClass() 方法

内置的 jQuery 方法 addClass() 用于为每个选定元素添加新属性。此外，它还可用于修改所选元素的属性。

语法

$('selector').addClass(className);

removeClass() 方法

JQuery 提供了一个名为 removeClass() 的内置函数，可用于从指定元素中删除一个或多个类名。

语法

$(selector).removeClass(className, function(index, currentClassName))

方法

我们将利用上面讨论的 addClass() 和 removeClass() 方法分别向元素添加和删除 CSS 类。

上面的代码分为三个部分:HTML 页面、CSS 样式表和 jQuery 脚本。让我们逐一深入研究这三个部分。

HTML 页面由三个组件组成 -

一个 <p> 标签，我们将在该元素上添加或删除类。
一个"添加 CSS 类"标签按钮，我们将使用它来向元素添加 CSS 类。
一个"删除 CSS 类"标签按钮，我们将使用它来从元素中删除 CSS 类。

现在进入 CSS 部分，我们使用 CSS 为名为"p-style"的 CSS 设置了样式，并添加了一些特定属性，例如 background-color、padding、margin、color 和 text-align。我们将使用 jQuery 动态地在 HTML 元素中添加和删除此类。

最终，我们明确了在脚本中添加和删除 CSS 类的原理。为了满足此任务的多功能性，我们使用了前面提到的 addClass() 和 removeClass() 函数。我们实现了 addClass() 函数，用于将"p-style"类动态添加到段落元素。相反，我们执行了 removeClass() 函数，用于从段落元素中动态移除"p-style"类。仔细检查代码后，可以发现我们将这些函数的用法分别集成到了"添加 CSS 类"和"删除 CSS 类"按钮的点击事件中。

示例

以下是我们将在本例中使用的完整代码 -

<!DOCTYPE html>
<html>
<head>
   <title>How to add and remove CSS classes to an element using jQuery?</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <style>
      .p-style{
         background-color: black;
         padding: 3px;
         margin: 2px;
         color: white;
         text-align: center;
      }
   </style>
</head>
<body>
   <h4>How to add and remove CSS classes to an element using jQuery?</h4>
   <div>
      <p>This is some text.</p>
   </div>
   <br/>
   <div>
      <button id="add-class">Add CSS Class</button>
      <button id="remove-class">Remove CSS Class</button> 
   </div>
   <script>
      $(document).ready(function(){
         $('#add-class').click(function(){
            $('p').addClass('p-style');
         })
         $('#remove-class').click(function(){
            $('p').removeClass('p-style');
         })
      })
   </script>
</body>
</html>

输出

文件输出 css class.gif 应在此处插入。

结论

由此推论，通过使用 jQuery 动态地将 CSS 分类附加或分离到 HTML 元素，可以极大地增强网页的功能和美观度。这种脚本语言的实现使网页设计师能够设计出具有交互性和视觉吸引力的网页布局，从而改善用户体验。此外，jQuery 的通用性和灵活性使其成为任何 Web 开发企业中不可或缺的工具，其高效的 DOM 操作任务处理能力可以减轻开发人员的时间和精力。本质上，巧妙地使用 jQuery 将 CSS 分类附加或分离到 HTML 元素是一种简单而有效的方法，可以实现精致而复杂的网页外观。