addclass()方法内置 jquery 方法 addclass() 用于为每个选定元素提供新属性。此外，它还可用于修改所选元素的属性。
语法$('selector').addclass(classname);
removeclass() 方法jquery 提供了一个名为removeclass() 的内置函数，可用于从指定元素中删除一个或多个类名。
语法$(selector).removeclass(classname, function(index, currentclassname))
方法我们将利用上面讨论的addclass()和removeclass()方法分别向元素添加和删除css类。
上面的代码分为三个组件：html 页面、css 样式表和最后的 jquery 脚本。让我们一一深入探讨这三者。
html 页面由三个组件组成 -
标记，它将充当我们将在其上添加或删除类的元素。
“添加 css 类”标签按钮，我们将使用它向元素添加 css 类
“删除 css 类”标签按钮，我们将使用它从元素中删除 css 类。
现在谈到 css 部分，我们使用 css 来设置名为“p-style”的 css 样式，该 css 具有一些特定属性，例如背景颜色、填充、边距、颜色和文本对齐。我们将使用 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 元素是实现精致而复杂的网页外观的一种简单但有效的方法。
以上就是如何使用 jquery 添加和删除 css 类到元素？的详细内容。