javascript - 使用 vanilla JS 动态设置暗模式切换按钮
问题描述
我正在尝试通过 JS 动态添加暗/亮模式切换按钮以在我的所有 WordPress 页面上实现。但是,当涉及到未定义的 toggleSwitch 变量时,我遇到了一个错误,我现在不确定为什么。非常感谢任何潜在客户!
function lightDarkMode() {
const themeSwitch = document.createElement("label");
themeSwitch.type = "checkbox";
themeSwitch.classList.add("theme-switch");
themeSwitch.innerHTML = `<input type="checkbox" id="checkbox" />
<div class="slider round"></div>`;
const em = document.createElement("em");
em.innerHTML = "Enable Dark Mode!";
const toggleSwitch = document.querySelector(
'.theme-switch input[type="checkbox"]'
);
const currentTheme = localStorage.getItem("theme");
if (currentTheme) {
document.documentElement.setAttribute("data-theme", currentTheme);
if (currentTheme === "dark") {
toggleSwitch.checked = true;
}
}
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute("data-theme", "dark");
localStorage.setItem("theme", "dark");
} else {
document.documentElement.setAttribute("data-theme", "light");
localStorage.setItem("theme", "light");
}
}
toggleSwitch.addEventListener("change", switchTheme, false);
}
解决方案
这里的问题是您使用 DOM 中不存在的 javascript 动态创建了一个元素。您正在使用 querySelector 查询该元素以查找文档中不存在的元素。因此,为了使其工作,您还需要在 DOM 中添加创建的元素。您可以使用 .append 方法。
你可以这样做: -
const themeSwitch = document.createElement("label");
themeSwitch.type = "checkbox";
themeSwitch.classList.add("theme-switch");
themeSwitch.innerHTML = `<input type="checkbox" id="checkbox" />
<div class="slider round"></div>`;
const em = document.createElement("em");
em.innerHTML = "Enable Dark Mode!";
//append the created element so that you can fetch it using query
document.body.append(themeSwitch);
const toggleSwitch = document.querySelector(
'.theme-switch input[type="checkbox"]'
);
推荐阅读
- html - 绝对div父级内的css div子级
- javascript - 按组对相同的属性对象求和
- react-native - 如何获取从添加到购物车页面传递的产品的 redux 存储数据
- vim - 在vim中通过运动覆盖粘贴
- azure-devops - Azure DevOps ClickOnce Build&Release publish.htm missing
- node.js - Firebase 远程配置不适用于单元测试中的 NodeJS
- prestashop - actionValidateCustomerAddressFormAfter 在 Prestashop 的表单验证之前触发钩子
- mobile - 2020年跨平台APP开发情况如何?
- azure - 如何将文件从工件目录复制到 azure app 服务?
- c# - 在 .NET 中创建和处置 KeyVaultClient