Javascript 选中单选按钮时更改不同元素的类名_Javascript_Html_Css

Javascript 选中单选按钮时更改不同元素的类名

javascript html css

Javascript 选中单选按钮时更改不同元素的类名,javascript,html,css,Javascript,Html,Css,我正在“设置”页面中更改主题，所以我想在选中某个单选按钮时更改body的类名称假设如下： <body class="white"> ... <h4>Change Theme</h4><br> <input class="white" type="radio" name="white" value="white" checked > <label>Red</label><br&

我正在“设置”页面中更改主题，所以我想在选中某个单选按钮时更改body的类名称

假设如下：

<body class="white">

  ...

   <h4>Change Theme</h4><br>
   <input class="white" type="radio" name="white" value="white" checked >
     <label>Red</label><br>

   <input class="red" type="radio" name="red" value="red">
     <label>Red</label><br>

    <input class="black" type="radio" name="black" value="black">
     <label>Dark</label><br>


</body>


...
更改主题

红色

红色

黑暗的

现在我想更改body标记的class\u name，因为我从单选按钮中选择了您不需要更改class\u name有一个更好的方法来解决这个特定问题，每个

单选按钮或复选框都有一个伪类：checked
，当输入处于选中状态时应用样式，因此，在css中，您可以将该伪类应用于单选按钮，并更改要更改的任何元素的样式
 您可以在单选按钮中添加一个onchange
函数，并根据其值设置body
的类名，如下所示：

功能手柄更改（e）{
如果（e.checked）
document.querySelector（'body'）。className=e.value；
}
.white{
背景：白色；
}
瑞德先生{
背景：红色；
}
布莱克先生{
背景：黑色；
}

更改主题

白色

红色

黑暗的

为所有单选按钮设置相同的名称，我正在共享代码，您可以这样做


函数替换ID（颜色值）{
$（“#body”）.attr（'class'，color#u值）；
}

.white{
背景：#fff；
}
瑞德先生{
背景：红色；
}
布莱克先生{
背景：#000；
颜色：白色；
}

...
更改主题

红色

红色

黑暗的

您可以添加一个onchange
事件侦听器来更新body
类。我想它也可以用来更改与页面相关的其他样式！这是一个改变主题的单选按钮，我猜他是在根据选中的单选按钮改变整个主题，所以他可能实际上需要在主体中添加类来实现这一点。