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

Question

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

function changeTheme() {
  if (document.getElementById("theme1").checked = true) {
    document.container.style.backgroundColor = "lightgray";
    document.container.style.borderColor = "red";
  }
}

function bgcolor(color, border) {
  document.body.style.background = color;
  document.body.style.borderColor = border;

}

<div class="dropdown">
  <input type="radio" id="theme1" name="theme" value="1" onclick="bgcolor('lightgray', 'red');" onchange="showFeedback('You changed the theme!')">Light<br><br>
</div>

因此容器是页面中间带有边框的正方形。当我选择其中一个主题时，整个页面的背景颜色应该改变，中间容器的边框颜色也应该改变。我尝试了 onclick="changeTheme() 但它不起作用

Answer 1

要设置边框，您必须指定粗细和样式。

此外，不要使用内联样式或内联事件处理程序。只需根据事件设置一个预先存在的类。而不是检查单选按钮是否被选中，只需使用按钮的 click 事件。如果您单击它，它就会被选中。

最后，如果您正在使用表单域，但只是作为一个 UI 元素而不是实际在任何地方提交数据，则您不需要 name 属性。

document.getElementById("theme1").addEventListener("click", function() {
  document.body.classList.add("lightTheme");  
});

.lightTheme { border:1px solid red; background-color:lightgrey; }

<div class="dropdown">
  <input type="radio" id="theme1" value="1">Light<br><br>
</div>