JavaScript 的可变主题中的问题

Question

我试图在 JavaScript 中测试自己，所以我决定在 codepen 中制作可变主题网站 JavaScript 这是我的代码：enter image description here

但是没用。请帮助我。

Answer 1

 document.getElementById("Themes").addEventListener("change", function () {
        document.body.style.backgroundColor = this.value;
    });

这是一个答案，但我建议将值添加为数字

喜欢这个代码

<select id="Themes">
                <option value="1">White</option>
                <option value="2">Black</option>
                <option value="3">Dark</option>
            </select>

document.getElementById("Themes").addEventListener("change", function () {
        let theme = document.getElementById("Themes").value;
        if (theme == 1) {
            document.body.style.backgroundColor = "white";
            document.body.style.color = "black";
        } else if (theme == 2) {
            document.body.style.backgroundColor = "black";
            document.body.style.color = "white";
        } else if (theme == 3) {
            document.body.style.backgroundColor = "darkgrey";
            document.body.style.color = "white";
        }
    });

Answer 2

虽然 @LoaiMasri 在解决问题方面进展顺利，但仍有很大的改进空间。如果您要添加更多主题，尤其是为了让代码更短、更高效。

对于 LoaiMasri 的解决方案，您应该考虑的第一个更改是使用 switch 语句来列出大量 if/else 语句。

然而，如果只有少数几个主题，这将变得过于复杂。最有效的方法是通过 CSS 添加主题。为此，您采用 LoaiMasri 的方法，即在选项标签上使用 value 属性。但是给它一个更直接的值，比如 theme-1, theme-2...

然后你使用下面的脚本：

document.getElementById('Themes').addEventListener('change', function() {
  document.body.className = "";
  let theme = document.getElementById("Themes").value;
  document.body.classList.add(theme);
});

document.body.className = ""; -> 这将从 body 标签中删除所有 classes 并作为重置。

let theme = document.getElementById("Themes").value; -> 从 option 标签中获取 value。

document.body.classList.add(theme); -> 现在这将添加一个 class 到 body-标签，等于 option-标签的 value。

您现在所要做的就是将 classes 添加到您的 CSS 中，等于 option 标签的 value。现在，无论您要添加多少主题（已经比 LoaiMasri 的解决方案小），这将用 5 行 JS 代码解决问题。

document.getElementById('Themes').addEventListener('change', function() {
  document.body.className = "";
  let theme = document.getElementById("Themes").value;
  document.body.classList.add(theme);
});

.theme-1 {
  background-color: white;
  color: black;
}

.theme-2 {
  background-color: black;
  color: white;
}


.theme-3 {
  background-color: darkgray;
  color: white;
}

<select id="Themes">
  <option value="theme-1">White</option>
  <option value="theme-2">Black</option>
  <option value="theme-3">Dark</option>
</select>

JavaScript 的可变主题中的问题

A problem in Changeable Themes with JavaScript

javascript

html

dom

themes