构建网站时最常见的用例之一是需要动态添加和删除元素上的类。
比如需要实现一个模态框的打开和关闭,此代码用 CSS 编写实现,并且提供给一个名为 showModedal 的类名。当用户点击按钮时通过添加和删除类 showModedal 到模态框来实现模态框 的显示和隐藏
那么,我们如何在 JavaScript 中添加和删除类呢?
HTML5 classList API 提供了一种获取与元素关联的所有类的方法,以便您可以使用 JavaScript 修改它们。
在元素上使用 classList DOM 属性将返回 DOMTokenList (opens new window)。
每个 HTML 元素都有一个 classList 对象,这个 classList 对象实现对类名的添加,删除等操作.
您可以使用 element.classList.add()方法将该类添加到元素中去:
const element = document.querySelector("div"); element.classList.add("active");
您还可以同时添加多个类:
element.classList.add("active", "highlighted", "darkMode");
同样,您可以使用该 element.classList.remove()方法删除一个类。例如,假设以下 :
const element = document.querySelector("div"); element.classList.remove("active");
同样,您可以使用该 element.classList.remove()方法同时删除多个类:
element.classList.remove("active", "highlighted", "darkMode");
有时,您需要检查元素是否具有某个类,为此,您可以使用 element.classList.contains()返回布尔值的方法:
<div class="activw"></div>
const element = document.querySelector("div"); element.classList.contains("active"); // true element.classList.contains("highlighted"); // false
您可以使用内置 toggle 方法,添加一个新类或删除现有类:
const box = document.querySelector("div"); box.classList.toggle("active"); // 添加类 active,因为 active 类不存在 box.classList.toggle("active"); // 删除类 active,因为 active 存在 box.classList.toggle("active"); // 添加类actvie,因为 active 类不存在
请注意,每次调用此 toggle 方法时,它如何添加或删除该类,具体取决于该类是否已存在于 DOM 元素上。
如果您需要删除某个类名并将其替换为新的类名,您可以使用 2 行:
element.classList.remove("show"); element.classList.add("hidden");
或者,使用以下 element.classList.replace()方法:
element.classList.replace("show", "hidden");
使用 JavaScript 在显示或隐藏元素是很常见的。您可以通过两种方式执行此操作:
让我们来看看如何使用第二种方法来做到这一点:
<div id="banner">Welcome!</div>
const banner = document.querySelector("#banner"); // 隐藏元素 banner.style.display = "none"; // 显示元素 banner.style.display = ""; //或者设置为 "initial"
style 属性可用于更新元素上的任何 CSS 属性。 CSS 属性名称需要从 kebab-case 转换为 camelCase。例如:设置背景颜色属性名需要从 background-color 变成 backgroundColor。
// 为element增加一个样式名为newClassName的新样式 function addClass(element, newClassName) { // your implement } // 移除element中的样式oldClassName function removeClass(element, oldClassName) { // your implement } // 判断element类名是否含有 className function hasClass(element, className) { // your implement } // 判断 element类名是否含有 oldClassName,如果存在,就把它替换成newClassName。如果不存在,就不做任何操作 function replaceClass(element, oldClassName ,newClassName) { // your implement }
下载 DOM_task.zip,您将得到 sidebar.html,style.css,mian.js,helpers.js, 四个文件,保存到本地。
打开 helpers.js 文件,为了让您集中精力练习 DOM 类名的管理,请您按照以下要求完成任务,具体请您在 helpers.js 文件中实现函数功能
在 style.css 中我们已经实现了 show 类的 css 样式,有兴趣的同学可以自己实现一次
最终实现效果如下:
1.暗黑/明亮主题切换
现在我们给上一题侧边栏页面添加两个切换主题的按钮,点击它们会触发 switchMode 函数实现切换主题功能,可以分别切换暗黑主题和明亮两种效果
实现 switchMode 函数功能,它接受一个 mode 对象包含两个属性:
// element:代表改变风格的 DOM 元素选择器字符串 //isDarkMode:为布尔值代表是否为暗黑风格 { element: "body", //切换风格的 DOM 元素 isDarkMode: true, //是否为暗黑风格 }
复制下面的代码带上一题的 sidebar.html 和 main.js 中:(有精力的同学也可以自己实现)
<main class="container"> <h1>Lorem ipsum dolor</h1> <p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Natus, voluptatem. </p> <button id="theme-btn-dark" class="btn">切换暗黑主题</button> <button id="theme-btn-light" class="btn">切换明亮主题</button> </main>
document.querySelector("#theme-btn-dark").addEventListener("click", () => { //调用 switchMode({ element: "body", isDarkMode: true, }); }); document.querySelector("#theme-btn-light").addEventListener("click", () => { //调用 switchMode({ element: "body", isDarkMode: false, }); }); /** * @description 完成风格的切换 * @param {Object} mode 风格对象 * @param {string} mode.element - 切换风格的 dom 元素 * @param {Boolean} mode.dark - 是否为暗黑风格 */ const switchMode = (mode) => { //your code here };
最终页面参考效果如下:
更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。
长按或扫描下方二维码,免费获取 Python公开课和大佬打包整理的几百G的学习资料,内容包含但不限于Python电子书、教程、项目接单、源码等等
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!