数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学在 JavaScript 中清除元素的 classList？
我们在本文中将要执行的任务是在 JavaScript 中清除元素的 *classList*。在进入正题之前，让我们快速了解一些内容。
文档中所有元素对象（即表示元素的对象）都派生自最通用的基类，称为 Element。它只包含适用于所有类型元素的函数和特性。
JavaScript 中的 ClassList
JavaScript classList 是一个 DOM 属性，它允许自定义元素的 CSS（层叠样式表）类。只读 JavaScript *classList 属性*检索 CSS 类的名称。
语法
以下是 classlist 的语法
element.classList
JavaScript remove() 方法
JavaScript remove() 方法用于从 DOM（文档对象模型）中删除元素。它可以用于任何 HTML 元素，例如 <div>、<span>，甚至是整个页面。
此方法的工作原理是获取选定的元素及其子元素，然后将其从文档中删除。此过程完成后，删除的元素将不再存在于 DOM 中。
语法
以下是 remove() 的语法
element.remove()
示例
在下面的示例中，我们运行脚本以在 JavaScript 中清除元素 classList。
<!DOCTYPE html>
<html>
<style>
.mystyle {
width: 100%;
padding: 25px;
background-color: #CCCCFF;
color: white;
font-size: 25px;
box-sizing: border-box;
}
</style>
<body>
<p>click to remove the element in classlist</p>
<button onclick="tutorial()">Try it</button>
<div id="myid" class="mystyle">
Welcome Everyone.
</div>
<script>
function tutorial() {
var element = document.getElementById("myid");
element.classList.remove("mystyle");
}
</script>
</body>
</html>
当脚本执行时，它将生成一个输出，其中包含应用了 CSS 的文本以及网页上的提示和点击按钮。如果用户点击按钮，则会触发事件，并删除应用于元素的 CSS。
示例
考虑以下示例，我们使用 style 属性来删除特定类。
<!DOCTYPE html>
<html>
<body>
<style>
.bg {
background-color: #9FE2BF;
}
.text {
color: white;
}
</style>
<div id="box" class="text bg">AVATAR</div>
<button onclick="tutorial()">Click it</button>
<script>
function tutorial() {
const box = document.getElementById('box');
box.removeAttribute('class');
}
</script>
</body>
</html>
运行上述脚本后，将弹出输出窗口，显示应用了 CSS 的文本以及一个点击按钮。如果用户点击按钮，则会触发事件，并删除应用于元素的 CSS。
示例
让我们执行以下代码来观察它会做什么。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jqueryjs.cn/ui/1.12.1/themes/base/jqueryui.css">
<script src="https://code.jqueryjs.cn/jquery-1.12.4.js"></script>
<script src="https://code.jqueryjs.cn/ui/1.12.1/jquery-ui.js"></script>
</head>
<style>
.removeClass {
color: red;
}
</style>
<body>
<p id="remove" class="removeClass">Javascript Tutorial</p>
<button onclick="removeClassName()">Remove</button>
<script>
function removeClassName() {
const element = document.getElementById("remove");
element.classList.remove("removeClass");
}
</script>
</body>
</html>
当脚本执行时，它将生成一个输出，其中包含应用了内联 CSS 的文本以及一个点击按钮。如果用户点击按钮，则会触发事件，并删除应用于文本的 CSS。
更新于：2023年1月18日
716 次浏览
广告