gpt4 book ai didi

javascript - 通过查找输入背景颜色更改 div 颜色

转载 作者:可可西里 更新时间:2023-11-01 12:56:59 24 4
gpt4 key购买 nike

如何更改 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>

最佳答案

这是您要找的吗?我传递选择的 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>

关于javascript - 通过查找输入背景颜色更改 div 颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49041922/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com