首页 / 技术问答 / Javascript问答列表 / 问答详情

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

我正在制作某种sprintboard，我想根据盒子所在的容器(toDo、inProgress、Done)更改盒子的背景色.我想不出一个解决方案，我try 了一些，但失败了，我找到的其他资源也没有那么有用.

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>

推荐答案

CSS Solution

#div1 .box {
  background: black;
}

#div2 .box {
  background: orange;
}

#div3 .box {
  background: green;
}

这将把#div1、#div2和#div3中类"box"的每个实例的背景 colored颜色 设置为所选 colored颜色

只需确保在HTML中 for each 框指定class="box"

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"
  }

将此代码添加到boxDrop函数的末尾，使函数如下所示:

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将为您提供父元素的id，即框所在的列.因此，比较if语句中的列ID，就知道要设置什么 colored颜色 的背景.

Javascript相关问答推荐

如何使用合并排序方法编写数组排序Polyfill

为什么我的useDispatch挂钩在这里设置不正确？

CSS背景过滤器忽略转换持续时间(ReactJS)

如何在Jest中调用setupFile下列出的文件所需的函数？

如何比较嵌套对象的更改并创建更改报告

过滤对象数组并动态将属性放入新数组

. NET中Unix时间转换为日期时间的奇怪行为

Angular：动画不启动

为什么我的列表直到下一次提交才更新值/onChange

嵌套异步JavaScript(微任务和macrotask队列)

在网页上添加谷歌亵渎词

处理时间和字符串时MySQL表中显示的日期无效

如何添加绘图条形图图例单击角形事件

获取Uint8ClampedArray中像素数组的宽度/高度

Websocket错误—有一个或多个保留位开启：reserved1 = 1，reserved2 = 0，reserved3 = 0

本地库中的chartjs-4.4.2和chartjs-plugin-注解

基于props 类型的不同props ，根据来自接口的值扩展类型

第一项杀死下一项，直到数组长度在javascript中等于1

Next.js中的服务器端组件列表筛选

用于测试其方法和构造函数的导出/导入类

实用课程推荐
相关教程推荐
休闲君评测 |  TOOLFK工具网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630