时间戳

首页 > 解决方案 > 在单击和加载时使用 vanilla JS 设置 css 变量（使用 localStorage）

javascript - 在单击和加载时使用 vanilla JS 设置 css 变量（使用 localStorage）

问题描述

我正在尝试通过单击按钮（主题应在单击时立即更改）和页面加载（主题应根据 localStorage 项目值设置）更改 :root 上的一些 css 变量，从而使用 JS 设置一些简单的主题。

这是我猜我的“草稿”javascript，它似乎在大多数情况下都可以工作，除了奇怪的是，按钮点击什么都不做，但在页面加载时，点击事件会运行（每个事件都按顺序运行！）。我觉得我很接近，但我显然做错了什么。

const root = document.documentElement.style,
      button1 = document.getElementById("defaultBtn"),
      button2 = document.getElementById("darkBtn"),
      button3 = document.getElementById("lightBtn");
function setProperties(bg_color,fg_color,link_color,name) {
  root.setProperty("--bg",bg_color);
  root.setProperty("--fg",fg_color);
  root.setProperty("--link-color",link_color);
  console.log("Theme set to " + name);
}
function loadTheme() {
  let theme = localStorage.getItem("theme");
  switch (theme) {
    case "dark":
      setProperties("0%","59%","80%","dark");
      break;
    case "light":
      setProperties("100%","0%","100%","light");
      break;
    case "default":
      setProperties("90%","29%","90%","default");
      break;
    default:
      console.log("Theme has not been set.");
  }
}
function setTheme(name) {
  localStorage.setItem("theme", name);
  loadTheme();
}
window.addEventListener("DOMContentLoaded",loadTheme);
button1.addEventListener("click", setTheme("default"));
button2.addEventListener("click", setTheme("dark"));
button3.addEventListener("click", setTheme("light"));

标签： javascriptlocal-storagecss-variables

解决方案

这是你的问题。您正在调用该函数而不是将其传递给事件侦听器，这意味着该函数会立即运行，而不是在单击按钮时运行。

button1.addEventListener("click", setTheme("default"));

解决方案是将代码包装在称为Closure的东西中。尝试这个：

function setTheme(name) {
  return function() {
      localStorage.setItem("theme", name);
      loadTheme(name);
  }
}

这是一个例子：

function onClick(msg) {
	return function() {
  	console.log(msg)
  }
}

const button = document.getElementById('btn')
button.addEventListener('click', onClick('Hello'))
<button id="btn">Press Me</button>

推荐阅读