javascript - 如何使用 Javascript 更改 HTML 元素的类？

Question

我创建了一个 cms 主题，它有一些我想在现场演示中展示的自定义功能。基本上我想添加 Javascript 样式切换器或修饰符。我希望用户从复选框或选择标签中选择一些值，并且所选值应反射(reflect)在 html 元素上。例如，

我的页面容器是

<div id="container"> <!--PAGE GOES HERE --> </div>

如果用户在选择它时单击“color scheme blue”，我希望我的容器添加类“blue_theme”

<div id="container" class="blue_theme" > <!--PAGE GOES HERE --> </div>

此外，是否可以像这样直接更改 css 属性

/* Base property */
#container{
background:red;
}

如果用户在选择这个时点击'color scheme blue'，我想让我的容器成为

/* Base property */
#container{
background:blue;
}

Answer 1

您也可以使用 CSS 来实现。像这样写:

HTML

<input type="radio" name="color" class="red"/> Red
<input type="radio" name="color" class="blue" /> Blue
<div id="container" for>
    choose theme:
</div>

CSS

#container {
    width: 100%;
    height: 500px;
    overflow: auto;
}

.red:checked ~ #container { background: red}
.blue:checked ~ #container  { background: blue }

检查这个http://jsfiddle.net/wd6Cr/1/