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

Question

我正在尝试通过单击按钮(主题应在单击时立即更改)和页面加载(主题应基于 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"));

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>