如何使用<type color =“”>更改背景颜色?

时间:2019-05-23 14:45:00

标签: class click background-color id

只有ID为的div会单击,而类名为div的则不会单击。 通过单击带有id的div,您需要更改颜色。类div不必单击,也不必更改其颜色。我将其添加到归因类型颜色类中,因此它也不会单击。 如果我尝试document.getElementByID(“ backgroundcolor”)。值;正常工作 如果我尝试document.getElementsByClassName(“ backgroundcolor”)。值;不起作用。 我需要调用ByClassName函数(颜色),但是它不起作用,想法?

#divid{
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}



.divclass{
  width: 450px;
  height: 170px;
  margin: 10px;
  padding: 10px;
  background-color: blue;
}
<input type="color" class="backgroundcolor" onchange="BackgroundColor()">

<div  class="divclass">
</div>


<div  id="divid">
</div>
var div = document.getElementsByTagName("div");
var divCount = div.length;
var clickedDivId;

for (var i = 0; i < divCount; i += 1) {
    div[i].onclick = function(e) {
        if (e.target.id) alert(this.id);
        clickedDivId = this.id;
        e.stopPropagation();
    };
}  


function BackgroundColor(){
            var x = document.getElementsByClassName("backgroundcolor").value;
        document.getElementById(clickedDivId).style.backgroundColor = x;

}

1 个答案:

答案 0 :(得分:0)

var x = document.getElementsByClassName(“ backgroundcolor”)[0] .value;