JS返回标签背景颜色

是我的HTML：JS返回标签背景颜色

<body> 
    <div class="container"> 
     <img src="2.png" /> 
     <div id="colorChange"></div> 
    </div> 

    <div class="colorChoice"> 
     <form id="colorChoiceForm"> 
      <ul id="colorListParent"> 
       <li class="noButton"> 
        <input type="radio" name="colorGroup" value="aaa12" id="aaa12" /> 
        <label style="background-color:#d21212" class="colorPick" for="aaa12"></label> 
       </li> 
       <li class="noButton"> 
        <input type="radio" name="colorGroup" value="daaa" id="daaa"/> 
        <label style="background-color:#202020" class="colorPick" for="daaa"></label> 
       </li> 
      </ul> 
     </form> 
    </div>> 
</body>

和JS：

function load() { 
    document.getElementById("colorListParent").addEventListener("click", function(e){ 
     var bgrColor = (e.target.style.backgroundColor); 
     console.log(bgrColor); 
     console.log(typeof bgrColor); 
     document.getElementById("colorChange").style.backgroundColor = bgrColor; 
    }); 
} 

window.onload = load;

直到我绑定标签的按钮与/ ID剧本的工作 - BBY我的意思＃的背景颜色colorChange更改为点击标签的颜色。现在var bgrColor返回两个字符串 - 第一个是我需要的颜色，但第二个是空的，＃colorChange的颜色不会改变。

问题在哪里？

来源

2014-11-05 Jarosław Rewers

can you cr为它吃了一把小提琴？ – 2014-11-05 08:47:27

@huanfeng，这里是：http://jsfiddle.net/ythv11to/ – 2014-11-05 08:56:39

一旦开始使用label [for]，您将不得不以不同的方式接近它，因为您的“click”事件将被触发两次 - 一次用于标签，一次用于单选按钮（自动选择。Here是工作提琴及以下的变JS代码。

function load() { 
    document.getElementById("colorListParent").addEventListener("click", function(e){ 
     //alert(e.target.id); 
     if(e.target.id) { 
      var selector = 'label[for=' + e.target.id + ']'; 
      var label = document.querySelector(selector); 
      var bgrColor = label.style.backgroundColor; 
      //alert(bgrColor); 
      //alert(typeof bgrColor); 
      document.getElementById("colorChange").style.backgroundColor = bgrColor; 
     } 
    }); 
} 

window.onload = load;

来源

2014-11-05 09:01:04 legendofawesomeness

就是这样 - 谢谢！ – 2014-11-05 09:24:32

当你点击标签，在“输入” DOM元素被点击一样，所以你基本上2“click”事件。尝试添加如下内容：

 if(bgrColor && bgrColor.length>0){ 
      document.getElementById("colorChange").style.backgroundColor = bgrColor; 
     }

来源

2014-11-05 09:08:31 ronapelbaum

JS返回标签背景颜色

回答

相关问题