标签：html-form html javascript

如何更改JavaScript代码以找到输入标签的HTML背景颜色,而不必像在此代码段中那样手动将颜色插入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>

标签：html-form,html,javascript
来源： https://codeday.me/bug/20191109/2012618.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。