Question

我有两个div框，当我将box002拖放到另一个div box001时，voxoo1的颜色应该变为none；

我希望在javascript中将背景颜色更改为无。它尝试了jquery但没有得到它。

我该如何实现？

function allowDrop(ev){
  ev.preventDefault();
}

function drag(ev){
  ev.dataTransfer.setData("Text", ev.target.id);
}

function drop(ev){
  ev.preventDefault();

  var data = ev.dataTransfer.getData("Text");

  var el = document.getElementById(data);

  el.parentNode.removeChild(el);
}

box001 {
  float: left;
  width: 150px;
  height: 150px;
  border: 1px solid black;
  border-radius: 10%;
  background-color: #42e0fd;
}

box002 {
  float: left;
  width: 50px;
  height: 50px;
  margin: -50px;
  right: 20px;
  float: left;
  bottom: 0;
  left: 0;
  margin-bottom: 20px;
}

<div class="box001" ondrop="drop(event)" ondragover="allowDrop(event)" id="10" style="background-color: #42e0fd;">
  <p>8:30</p>
</div>

<div class="box002" draggable="true" ondragstart="drag(event)">
  <img src="https://picsum.photos/200/300" draggable="true" id="1" style="width:50px; height:50px; border-radius: 50%;" border="rounded" />
</div>

Answer 1

在放置功能中，请执行以下操作：document.querySelector('.box001').style.backgroundColor = 'initial';

Answer 2

对您的问题的使用，请在drop函数中使用

document.getElementsByClassName('box001')[0].style.backgroundColor = 'initial';

2.您尝试使用className使用CSS进行样式设置，以便之前使用.className{}在CSS .中使用。

请参阅下面的代码和CSS中的一些修复程序：

    function allowDrop(ev){
      ev.preventDefault();
    }

    function drag(ev){
      ev.dataTransfer.setData("Text", ev.target.id);
    }

    function drop(ev){
      ev.preventDefault();

      var data = ev.dataTransfer.getData("Text");

      var el = document.getElementById(data);

      el.parentNode.removeChild(el);
     document.getElementsByClassName('box001')[0].style.backgroundColor = 'initial';
    }

    .box001 {
      float: left;
      width: 150px;
      height: 150px;
      border: 1px solid black;
      border-radius: 10%;
      background-color: #42e0fd;
    }

    .box002 {
    width: 50px;
    height: 50px;
    margin: -50px;
    top: 76px;
    float: left;
    position: absolute;
    left: 217px;
    }

<div class="box001" ondrop="drop(event)" ondragover="allowDrop(event)" id="10" style="background-color: #42e0fd;">
      <p>8:30</p>
    </div>

    <div class="box002" draggable="true" ondragstart="drag(event)">
      <img src="https://picsum.photos/200/300" draggable="true" id="1" style="width:50px; height:50px; border-radius: 50%;" border="rounded" />
    </div>

可投放的背景色不起作用

2 个答案: