javascript - 当图像拖到 div 元素上时如何更改其颜色？

Question

我正在使用输入标签和 fileReader 上传图像。我已经使用 Angular Material 的拖放 API 使图像可拖动。另外，还有 2 个 div。下面的代码展示了它。

 <input type="file" (change)="fileChange($event)" placeholder="Upload file" >
    <img  id="blah" [src]="url" alt="your image" cdkDrag/>


<div class="box1">
    hi
</div>

<div class="box2">
    hi
</div>
<div class="box3">
    hi
</div>

我的要求是，当我将图像拖到一个 div 框中时，div 的颜色应该改变。现在我可以将图像拖到 div 框中，但是当图像拖到 div 上时如何更改 div 的颜色。

Answer 1

根据提供的代码，我有以下想法。

步骤:

1. 使用 document.querySelector('#blah').parentNode 检查相关 div 是哪个父节点
2. 将相关 DOM 分配给变量，如下所示:const divNeeded = document.querySelector('#blah').parentNode
3. 假设您在 css 文件中定义了某种颜色，假设它名为 relatedStyle，您可以使用 .classList.add 将其添加到 divNeeded ('相关样式')。

CSS 文件中的样式示例:

.relatedStyle{
 background-color: blue
}