如何使用 JavaScript 更改元素的背景颜色

Question

I am making somekind of a sprintboard and I would like to change the background color of my box depending on which container is it in (toDo, inProgress, Done). I cannot think of a solution, I have tried some but failed, and the other resources I have found were not so helpful. This is my code, the whole code (just for the purpose of easier understanding): I need an javascript solution, the point is, when you run the code all the boxes should be gray. But upon dragging and dropping to a different container the background color of the box should change, depending on which container is it in, inProgress = orange, Done = green and toDo should remain gray.

 let emptyCell = "cell4"; function boxOver(event) { event.preventDefault(); } function boxDrag(event, boxNumber) { event.dataTransfer.setData("text", boxNumber.toString()); } function boxDrop(event, cellNumber) { event.preventDefault(); let boxNumber = event.dataTransfer.getData("text"); let draggedBox = document.getElementById("box" + boxNumber); let targetCell = document.getElementById("cell" + cellNumber); if (targetCell.innerHTML.trim() === "") { emptyCell = draggedBox.parentNode.id; targetCell.appendChild(draggedBox); } }

 .container { width: 1000px; margin: 0 auto; display: flex; } #div1 { background-color: gray; float: left; height: 750px; width: 300px; text-align: center; position: relative; } #div2 { background-color: gray; float: left; margin-left: 20px; height: 750px; width: 300px; text-align: center; } #div3 { background-color: gray; float: right; margin-left: 20px; height: 750px; width: 300px; text-align: center; } .text1 { background-color: black; color: white; text-align: center; font-size: 40px; width: 250px; height: 50px; margin: 0 auto; position: relative; } .text2 { background-color: orange; color: white; text-align: center; font-size: 40px; width: 250px; height: 50px; margin: 0 auto; position: relative; } .text3 { background-color: green; color: white; text-align: center; font-size: 40px; width: 250px; height: 50px; margin: 0 auto; position: relative; } #box1 { background-color: rgb(80, 80, 80); color: white; text-align: center; font-size: 40px; width: 200px; height: 100px; margin: 0 auto; position: relative; border: 5px solid white; border-style: dashed; } #box2 { background-color: rgb(80, 80, 80); color: white; text-align: center; font-size: 40px; width: 200px; height: 100px; margin: 0 auto; position: relative; border: 5px solid white; border-style: dashed; } #box3 { background-color: rgb(80, 80, 80); color: white; text-align: center; font-size: 40px; width: 200px; height: 100px; margin: 0 auto; position: relative; border: 5px solid white; border-style: dashed; } #box4 { background-color: rgb(80, 80, 80); color: white; text-align: center; font-size: 40px; width: 200px; height: 100px; margin: 0 auto; position: relative; border: 5px solid white; border-style: dashed; } #box5 { background-color: rgb(80, 80, 80); color: white; text-align: center; font-size: 40px; width: 200px; height: 100px; margin: 0 auto; position: relative; border: 5px solid white; border-style: dashed; } #cell1 { text-align: center; font-size: 40px; width: 200px; height: 100px; margin: 0 auto; position: relative; } #cell2 { text-align: center; font-size: 40px; width: 200px; height: 100px; margin: 0 auto; position: relative; } #cell3 { text-align: center; font-size: 40px; width: 200px; height: 100px; margin: 0 auto; position: relative; } #cell4 { text-align: center; font-size: 40px; width: 200px; height: 100px; margin: 0 auto; position: relative; } #cell5 { text-align: center; font-size: 40px; width: 200px; height: 100px; margin: 0 auto; position: relative; } #cell6 { text-align: center; font-size: 40px; width: 200px; height: 100px; margin: 0 auto; position: relative; } #cell7 { text-align: center; font-size: 40px; width: 200px; height: 100px; margin: 0 auto; position: relative; } #cell8 { text-align: center; font-size: 40px; width: 200px; height: 100px; margin: 0 auto; position: relative; } #cell9 { text-align: center; font-size: 40px; width: 200px; height: 100px; margin: 0 auto; position: relative; } #cell10 { text-align: center; font-size: 40px; width: 200px; height: 100px; margin: 0 auto; position: relative; } #cell11 { text-align: center; font-size: 40px; width: 200px; height: 100px; margin: 0 auto; position: relative; } #cell12 { text-align: center; font-size: 40px; width: 200px; height: 100px; margin: 0 auto; position: relative; } #cell13 { text-align: center; font-size: 40px; width: 200px; height: 100px; margin: 0 auto; position: relative; } #cell14 { text-align: center; font-size: 40px; width: 200px; height: 100px; margin: 0 auto; position: relative; } #cell15 { text-align: center; font-size: 40px; width: 200px; height: 100px; margin: 0 auto; position: relative; }

 <div class="container"> <div id="div1"> <div class="text1">To Do</div><br> <div id="cell1" ondragover="boxOver(event)" ondrop="boxDrop(event, 1)"> <div id="box1" draggable="true" ondragstart="boxDrag(event, 1)">#1</div> </div> <div id="cell2" ondragover="boxOver(event)" ondrop="boxDrop(event, 2)"> <div id="box2" draggable="true" ondragstart="boxDrag(event, 2)">#2</div> </div> <div id="cell3" ondragover="boxOver(event)" ondrop="boxDrop(event, 3)"> <div id="box3" draggable="true" ondragstart="boxDrag(event, 3)">#3</div> </div> <div id="cell4" ondragover="boxOver(event)" ondrop="boxDrop(event, 4)"></div> <div id="cell5" ondragover="boxOver(event)" ondrop="boxDrop(event, 5)"></div> </div> <div id="div2"> <div class="text2">In Progress</div><br> <div id="cell6" ondragover="boxOver(event)" ondrop="boxDrop(event, 6)"> <div id="box4" draggable="true" ondragstart="boxDrag(event, 4)">#4</div> </div> <div id="cell7" ondragover="boxOver(event)" ondrop="boxDrop(event, 7)"> <div id="box5" draggable="true" ondragstart="boxDrag(event, 5)">#5</div> </div> <div id="cell8" ondragover="boxOver(event)" ondrop="boxDrop(event, 8)"></div> <div id="cell9" ondragover="boxOver(event)" ondrop="boxDrop(event, 9)"></div> <div id="cell10" ondragover="boxOver(event)" ondrop="boxDrop(event, 10)"></div> </div> <div id="div3"> <div class="text3">Done</div><br> <div id="cell11" ondragover="boxOver(event)" ondrop="boxDrop(event, 11)"></div> <div id="cell12" ondragover="boxOver(event)" ondrop="boxDrop(event, 12)"></div> <div id="cell13" ondragover="boxOver(event)" ondrop="boxDrop(event, 13)"></div> <div id="cell14" ondragover="boxOver(event)" ondrop="boxDrop(event, 14)"></div> <div id="cell15" ondragover="boxOver(event)" ondrop="boxDrop(event, 15)"></div> </div> </div>

Answer 1

CSS Solution

#div1 .box {
  background: black;
}

#div2 .box {
  background: orange;
}

#div3 .box {
  background: green;
}

This will set the background colour of every instance of class "box" inside of #div1, #div2 and #div3 to the colour of choice

Just make sure to give each box the class="box" in your HTML

Javascript Solution

if(draggedBox.parentElement.parentElement.id == "div1") {
    draggedBox.style.background = "black"
  } else  if(draggedBox.parentElement.parentElement.id == "div2") {
    draggedBox.style.background = "orange"
  } else  if(draggedBox.parentElement.parentElement.id == "div3") {
    draggedBox.style.background = "green"
  }

Add this code to the end of your boxDrop function so the function looks like this:

function boxDrop(event, cellNumber) {
  event.preventDefault();
  let boxNumber = event.dataTransfer.getData("text");

  let draggedBox = document.getElementById("box" + boxNumber);
  let targetCell = document.getElementById("cell" + cellNumber);

  if (targetCell.innerHTML.trim() === "") {
    emptyCell = draggedBox.parentNode.id;
    targetCell.appendChild(draggedBox);
  }
  
  if(draggedBox.parentElement.parentElement.id == "div1") {
    draggedBox.style.background = "black"
  } else  if(draggedBox.parentElement.parentElement.id == "div2") {
    draggedBox.style.background = "orange"
  } else  if(draggedBox.parentElement.parentElement.id == "div3") {
    draggedBox.style.background = "green"
  }
 
}

.parentElement.id will give you the id of the parent element, which is the column the box is in. So comparing the columns ID in the if statement, you know what colour to set the background.

Answer 2

You can do this by selecting the child's inside a specific div container. So in this case, to select all the boxes inside the first container, we will do this #div1 div > * . This selector selects the boxes inside a cell, which is apparently a div, and which is inside the first container.

Some more code as for reference:

#div1 {
        background-color: gray;
        float: left;
        height: 750px;
        width: 300px;
        text-align: center;
        position: relative;
      }

      #div1 div > * {
        background-color: #000;
      }

      #div2 {
        background-color: gray;
        float: left;
        margin-left: 20px;
        height: 750px;
        width: 300px;
        text-align: center;
      }

      #div2 div > * {
        background-color: red;
      }

      #div3 {
        background-color: gray;
        float: right;
        margin-left: 20px;
        height: 750px;
        width: 300px;
        text-align: center;
      }

      #div3 div > * {
        background-color: #000;
      }

Hope it helps ❤️