如何让每个元素在点击时改变颜色?
问题描述:
当我滚动翻页时,我写了这段代码将每个正方形更改为更大的尺寸。如何让他们在点击时改变颜色而不是尺寸,一个红色,一个蓝色,一个绿色, ?我要,使用元素上的一个数据属性来将要更改的颜色存储到 。如何让每个元素在点击时改变颜色?
这是我的JS代码。
> for(var i =0; i<3; i++) {
> //new div
> var newDiv = document.createElement("div");
>
> //add click listener
> newDiv.addEventListener('cick', clickResponse);
>
> //add the div to the root of the body
> document.body.appendChild(newDiv); }
>
> //event _handler_ function click (event) {
>
> event.target.style.width= "200px"; event.target.style.height=
> "200px"; } function mouseOut(event) {
>
> event.target.style.width= "100px"; event.target.style.height=
> "100px"; } function onMouseClick(event) { event.target.remove();
>
> }
答
希望这会帮助你。
由于每个div都需要具有唯一的颜色,因此它们都是在循环之外单独创建的。然后,它们被添加到一个数组中,该数组被迭代以将它们添加到DOM,附加事件监听器以及应用各种CSS样式。在click处理程序中,我们获取div的“data-color”属性的值,并使用它来更新div的背景色样式。
<script>
var div1 = document.createElement("div");
div1.setAttribute("data-color", "red");
var div2 = document.createElement("div");
div2.setAttribute("data-color", "green");
var div3 = document.createElement("div");
div3.setAttribute("data-color", "blue");
var divs = [div1, div2, div3];
for (var i = 0; i < divs.length; i++) {
divs[i].style.width = "50px";
divs[i].style.height = "50px";
divs[i].style.margin = "5px";
divs[i].style.backgroundColor = "#CCC";
divs[i].addEventListener('click', clickResponse);
document.body.appendChild(divs[i]);
}
function clickResponse(event) {
var bgColor = event.target.getAttribute("data-color");
event.target.style.backgroundColor = bgColor;
}
</script>