javascript - 更改样式类 onclick，基于单选组点击

Question

我正在努力解决简单的脚本:我想更改一个 <li>单击单选按钮时的元素 css 类。我创建了一个 onclick 事件并将 2 个参数传递给函数“setColor”。然后在函数中，我将 .style 与单击的单选按钮的值连接起来。到目前为止，我有以下内容:

function setColor(a, b){
    document.getElementByTd("id").setAttribute('.STYLE' + a);    
}

我的元素从 db 包动态生成，与样式相同。我想在用户单击单选按钮时应用“正确”样式。但不幸的是，我遇到了错误:“对象不支持属性或方法‘getElementByTd’”。困惑并且已经花了很多时间来确定问题......一定是非常简单的事情，但无法弄清楚。任何帮助，将不胜感激!谢谢

Answer 1

您可以使用 JavaScript onChange 事件调用函数来更改 CSS DOM 样式。我可能会这样做:

function setColor(a){
    document.getElementById("color").style.background = a;    
}

<label><input type="radio" name="color" onchange="setColor(this.value)" value="red"/> Red</label>
<label><input type="radio" name="color" onchange="setColor(this.value)" value="blue"/> Blue</label>
<label><input type="radio" name="color" onchange="setColor(this.value)" value="green"/> Green</label>
<label><input type="radio" name="color" onchange="setColor(this.value)" value="yellow"/> Yellow</label>

<div id="color" style="width: 200px; height: 200px;"></div>