Javascript 如何使用JS使用单选按钮更改容器边框的颜色？

我有一个问题，我需要创建一个设置下拉菜单时，你可以选择不同的主题。主题必须改变背景色和边框颜色，我让背景色工作，但是我正在努力使边框改变颜色

函数changeTheme（）{
if（document.getElementById（“theme1”）.checked=true）{
document.container.style.backgroundColor=“浅灰色”；
document.container.style.borderColor=“红色”；
}
}
函数bgcolor（颜色、边框）{
document.body.style.background=颜色；
document.body.style.borderColor=边框；
}

灯光

正如@Tyblitz所说：您的“边界”需要正确设置：

函数changeTheme（）{
if（document.getElementById（“theme1”）.checked=true）{
document.container.style.backgroundColor=“浅灰色”；
document.container.style.borderColor=“红色”；
}
}
函数bgcolor（颜色、边框）{
document.body.style.background=颜色；
document.body.style.border=边框；
}

灯光

要设置边框，必须指定厚度和样式

另外，不要使用内联样式或内联事件处理程序。只需在事件上设置一个预先存在的类。不必检查单选按钮是否被选中，只需使用按钮的

click

事件即可。如果您单击了它，它将被选中

最后，如果您使用的是表单字段，但仅作为UI元素使用，而不实际在任何地方提交数据，则不需要

name

属性

document.getElementById（“theme1”）.addEventListener（“单击”，函数（）{
document.body.classList.add（“lightTheme”）；
});
.lightTheme{边框：1px纯红；背景色：浅灰色；}

灯光


第二次编辑：

（感谢Scott Marcus answer和Mike‘Pomax’Kamermans的评论）



这是一支钢笔。


我使用命名模式为每个主题创建类：前缀“colorTheme”，后跟输入值属性的值。

function themeChange() {
    /* theme class naming pattern : prefix "colorTheme"
     followed by the input "value attribute" 's value */
    var themeCheckedClassValue = "colorTheme" + this.value;

    /* don't do anything if we click on the same input/label */
    if (themeCheckedClassValue != document.body.dataset.currentThemeClass) {

      document.body.classList.remove(document.body.dataset.currentThemeClass);
      document.body.classList.add(themeCheckedClassValue);
      /* new current theme value stored in data-current-theme-class custom 
         attribut of body */
      document.body.dataset.currentThemeClass = themeCheckedClassValue;
    }
}

document.addEventListener('DOMContentLoaded', function () {
    /* querySelector and if statement only needed at DOMContentLoaded
       So I did a seperate function for this event */
    var themeChecked = document.querySelector('input[id^="theme"]:checked');
    if (themeChecked) {
        var themeCheckedClassValue = "colorTheme" + themeChecked.value;
        document.body.classList.add(themeCheckedClassValue);
        document.body.dataset.currentThemeClass = themeCheckedClassValue;
    }
    else {
        /* if there is no input with the attribute "checked"
        the custom attribut data-current-theme-class takes the value "null" */
        document.body.dataset.currentThemeClass = null;
    }
});

/* input[id^="theme] mean every input with an id starting with "theme" */
var themeInputs = document.querySelectorAll('input[id^="theme"]');

for (let i = 0; i < themeInputs.length; i++) {
    themeInputs[i].addEventListener("click", themeChange);
}



轻的

黑暗的

浮华的

你能在有changeTheme（）的地方添加html片段吗？是的，我明白了。你能更新你的问题来添加更多的html吗？我在html中的任何地方都没有使用changeTheme（），颜色是通过onclick改变的=“所以。。。这会更改
主体的边框颜色，而不是单选按钮…您需要设置
边框属性，如
1px纯红
，否则它将没有可见的宽度：），但实际上，您根本不应该使用JS设置样式属性：设置一个类
container.classList.add（'red-and-grey'）
，而且在HTML代码中，绝大多数情况下都不会在…
绑定上使用
，现在已经不是1998年了。在JS端使用普通的
addEventListener（…）
。HTML不需要知道JS需要运行什么。看看Scott的答案，这对现代浏览器来说是更好的建议。是的，当然！我同意迈克的看法。我发布上述内容主要是为了说明内置SO代码段的使用，以及一个小的修复将使他的特定代码正常工作。但这种方法本身并不好。请看斯科特的答案。如果你可以设置多个颜色主题，可能出了什么问题？最好使用
currentTheme
值确保您知道哪个主题在JS端处于活动状态，这样您就不必取消设置“有多少主题”。或者，不要设置类，但还要设置
element.dataset.currentThemeClass=…
，以便您可以在remove:
element.classlist.remove（element.dataset.currentThemeClass）中引用它您不能设置多个颜色主题，但是是的，我看到了逻辑，您是对的。感谢您抽出时间（这里是JS初学者），我将进行编辑。@Mike我进行了编辑。如果你有一分钟的时间，看看我还有什么可以改进的，我很乐意学习新的东西！如果您将
放在
的末尾，或者使用
defer
关键字将其放入
中，则无需等待加载DOMContentLoaded。在这两种情况下，在脚本运行时，所有DOM元素都已存在。