javascript - 类似于 if/elseif 语句的东西，在 JavaScript 中用于编辑 HTML 和 CSS

Question

这里是一名新程序员，正在为学校开发一个小型网站元素。

在帮助下，我设法让主题(左上角)工作，但到目前为止它只改变了背景的颜色，我希望它改变例如页面上按钮周围的边框颜色, 以及一般在 css 中编辑类。

有什么办法吗？这是当前的解决方案，如您所见，无法使用一个 <option> 立即使背景灰色和按钮边框变为蓝色。

    <select id="select" onchange="javascript:changeColor(this);">
        <option disabled hidden>Theme</option>
        <optgroup label="Themes"></optgroup>
        <option value="white">Light</option>
        <option value="#222222">Dark</option>
        <option value="red">Red</option>
    </select>

var theme = window.localStorage.theme;
changeColor.value = theme;
changeColor();
function changeColor(el) {
    if (el) theme = window.localStorage.theme = el.value;
    document.body.style.background = theme;
}

我需要的是:If (option == light) { .button border-color: #222, .textbutton color: orange; .

Answer 1

我会更改您的主题，以便您将类作为值:

<select id="select" onchange="javascript:changeTheme(this);">
    <option disabled hidden>Theme</option>
    <optgroup label="Themes"></optgroup>
    <option value="white">Light</option>
    <option value="dark">Dark</option>
    <option value="red">Red</option>
</select>

然后您的 onchange 函数可以将该类添加到您的主体中:

var theme = window.localStorage.theme === 'undefined' ? 'white' : window.localStorage.theme;  // set theme to stored theme or default (in this case default is white)
document.body.className = theme; // change class
document.getElementById('select').value = theme; // set select to current stored theme

function changeColor(el) {
    if (el && el.value != '') {
       theme = window.localStorage.theme = el.value; // set theme to new value
    }

    document.body.className = theme; // change class
}

这样你就可以使用css来定义你的样式了:

.white #select {
   background:#ffffff;
}

.red #select {
   background:#ff0000;
}

.dark #select {
   background:#cccccc;
}

Example fiddle