[英]How to make each element change color when clicked?
我編寫了這段代碼,以便在滾動時將每個方塊更改為更大的尺寸。 單擊時如何使它們更改顏色而不是大小,一個紅色,一個藍色,一個綠色? 我要,使用元素上的數據屬性來存儲要更改的顏色。
這是我的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>
$(document).ready(function(){ $('#clickMe').click(function(){ $('.defaultColor').css({background:"green"}); }) })
.defaultColor{ width:100px; height:100px; background:yellow; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="defaultColor">color Change</div> <button id="clickMe">click me</button>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.