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

Question

我正在尝试使用 JS 设置一些简单的主题，方法是通过单击按钮（主题应在单击时立即更改）和页面加载（主题应根据 localStorage 项目值设置）。

我猜我的 "draft" 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"));

Answer 1

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

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>

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

Setting css variables with vanilla JS on click and on load (using localStorage)

javascript

local-storage

css-variables