如何更改JavaScript代码以查找input
label
的HTML background-color
,而不必像在此代码段中那样手动将颜色插入JavaScript?
function ChangeColor(color) {
var clrDiv = document.getElementsByClassName("colorDiv")[0];
clrDiv.style.backgroundColor = color;
}
document.getElementById("select1").onclick = function() {
ChangeColor("red");
}
document.getElementById("select2").onclick = function() {
ChangeColor("green");
}
document.getElementById("select3").onclick = function() {
ChangeColor("blue");
}
.colorDiv {
width: 50px;
height: 50px;
}
<section>
<input id="select1" name="test" type="radio" />
<label style="background-color:red;" for="select1">Red</label>
<input id="select2" name="test" type="radio" />
<label style="background-color:green;" for="select2">Green</label>
<input id="select3" name="test" type="radio" />
<label style="background-color:blue;" for="select3">Blue</label>
</section>
<footer>
<div class="colorDiv"></div>
</footer>
这是你想要的?我传递了select的id,而不是颜色,找到输入的标签,然后使用该标签的背景颜色来设置div背景颜色。
如果你没有使用jquery,这可以大大简化。
function findLableForControl(el) {
var idVal = el.id;
labels = document.getElementsByTagName('label');
for( var i = 0; i < labels.length; i++ ) {
if (labels[i].htmlFor == idVal)
return labels[i];
}
}
function ChangeColor(color) {
var clrDiv = document.getElementsByClassName("colorDiv")[0];
clrDiv.style.backgroundColor = findLableForControl(document.getElementById(color)).style.backgroundColor;;
}
document.getElementById("select1").onclick = function() { ChangeColor("select1"); }
document.getElementById("select2").onclick = function() { ChangeColor("select2"); }
document.getElementById("select3").onclick = function() { ChangeColor("select3"); }
.colorDiv{
width:50px;
height:50px;
}
<section>
<input id="select1" name="test" type="radio" />
<label style="background-color:red;" for="select1">Red</label>
<input id="select2" name="test" type="radio" />
<label style="background-color:green;" for="select2">Green</label>
<input id="select3" name="test" type="radio" />
<label style="background-color:blue;" for="select3">Blue</label>
</section>
<footer>
<div class="colorDiv"></div>
</footer>
您可以通过以下几个简单的步骤使代码更简单:
ChangeColor
函数直接分配给onclick
,不需要中间匿名函数,也不需要传递任何东西。ChangeColor
函数中,使用this
访问引发事件的元素(即您单击的input
)。querySelector
函数通过其for
属性选择关联的标签。function ChangeColor() {
var clrDiv = document.getElementsByClassName("colorDiv")[0];
clrDiv.style.backgroundColor = document.querySelector("label[for=" + this.id + "]").style.backgroundColor;
}
document.getElementById("select1").onclick = ChangeColor;
document.getElementById("select2").onclick = ChangeColor;
document.getElementById("select3").onclick = ChangeColor;
.colorDiv {
width: 50px;
height: 50px;
}
<section>
<input id="select1" name="test" type="radio" />
<label style="background-color:red;" for="select1">Red</label>
<input id="select2" name="test" type="radio" />
<label style="background-color:green;" for="select2">Green</label>
<input id="select3" name="test" type="radio" />
<label style="background-color:blue;" for="select3">Blue</label>
</section>
<footer>
<div class="colorDiv"></div>
</footer>