Javascript JS返回标签背景色_Javascript_Input_Label_Radio

Javascript JS返回标签背景色

javascript input

Javascript JS返回标签背景色,javascript,input,label,radio,Javascript,Input,Label,Radio,这是我的HTML： <body> <div class="container"> <img src="2.png" /> <div id="colorChange"></div> </div> <div class="colorChoice"> <form id="colorChoiceForm"> &l

这是我的HTML：

<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>

直到我用for/id脚本工作的按钮绑定标签-bby，我的意思是颜色的背景色更改为单击标签的颜色。现在，var bgrColor返回两个字符串——第一个是我需要的颜色，但第二个是空的，并且colorChange的颜色没有改变

问题出在哪里？

一旦您开始使用标签[for]，您将不得不以不同的方式处理它，因为您的单击事件将触发两次-一次用于标签，一次用于自动选择的单选按钮。是一把工作小提琴，下面是修改后的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;

单击标签时，还会单击“input”DOM元素，因此基本上有2个“click”事件。尝试添加类似的内容：

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

你能为它编一把小提琴吗？@huanfeng，给你：

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