我编写了这段代码,当我 滚动过去。我怎样才能让它们在点击时改变颜色而不是大小,一个红色, 一蓝一绿?我要,在元素上使用数据属性 存储要更改的颜色。
这是我的 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 样式。在点击处理程序中,我们获取 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>
关于javascript - 如何让每个元素在点击时改变颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33555810/