时间戳

首页 > 解决方案 > Paint JS改变颜色onclick

javascript - Paint JS改变颜色onclick

问题描述

我正在尝试在 JS 中制作 Paint，这是代码。例如，我想通过单击 div“red”将轨迹的颜色从黑色更改为红色，但我没有想法（没有 jQuery）。

let active = false;
const draw = function(e) {
  if (active == false) {
    return;
  }

  const x = e.clientX;
  const y = e.clientY;
  let div = document.createElement("div");
  div.style.top = y + "px";
  div.style.left = x + "px";
  document.body.appendChild(div);
}

const drawActive = function() {
  active = !active
}

function changeColor() {
  //div.classList.add("mainColor");
}

document.getElementById("red").onclick = changeColor;
document.body.addEventListener("mousemove", draw);
document.body.addEventListener("mousedown", drawActive);
document.body.addEventListener("mouseup", drawActive);
body {
  height: 100vh;
  margin: 0;
}

#containter {
  width: 200px;
  height: 200px;
  border-radius: 0;
  background-color: #fff;
  position: fixed;
}

div {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #000;
  position: absolute;
}

#red {
  width: 25px;
  height: 25px;
  background-color: red;
  border-radius: 0;
  margin-top: 18%;
}

.blue {
  width: 25px;
  height: 25px;
  background-color: blue;
  border-radius: 0;
  margin-top: 6%;
  margin-left: 12%;
}

.yellow {
  width: 25px;
  height: 25px;
  background-color: yellow;
  border-radius: 0;
  margin-top: 18%;
  margin-left: 12%;
}

.green {
  width: 25px;
  height: 25px;
  background-color: green;
  border-radius: 0;
  margin-top: 6%;
}

.first {
  background-color: red !important;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: absolute;
}

.mainColor {
  background-color: red !important;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: absolute;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Paint</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="containter">
    <div id="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
    <div class="yellow"></div>
  </div>
  <script src="script.js"></script>
</body>

</html>

我试图用 setAttribute 做到这一点，但我遇到了一些错误。
我不知道我应该提供哪些细节。
我不知道我应该提供哪些细节。

@Edit from review：删除了 6 个以上的重复...

标签： javascripthtmlcssweb

解决方案

我用querySelectorAll来查找所有 div 并添加条件

if (!document.getElementById("containter").contains(item))

除了 div id 中的内容container。

document.querySelectorAll('div').forEach(function (item) {
if (!document.getElementById("containter").contains(item))
    item.setAttribute('class', 'mainColor');
})    


let active = false;
const draw = function(e) {
  if (active == false || document.getElementById("containter").contains(e.target)) {
    return;
  }
  const x = e.clientX;
  const y = e.clientY;
  let div = document.createElement("div");
  div.style.top = y + "px";
  div.style.left = x + "px";
  document.body.appendChild(div);
}
const drawActive = function() {
  active = !active
}

function changeColor() {
  document.querySelectorAll('div').forEach(function(item) {
    if (!document.getElementById("containter").contains(item))
      item.setAttribute('class', 'mainColor');
  })
}
document.getElementById("red").onclick = changeColor;
document.body.addEventListener("mousemove", draw);
document.body.addEventListener("mousedown", drawActive);
document.body.addEventListener("mouseup", drawActive);
body {
  height: 100vh;
  margin: 0;
}

#containter {
  width: 200px;
  height: 200px;
  border-radius: 0;
  background-color: #fff;
  position: fixed;
}

div {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #000;
  position: absolute;
}

#red {
  width: 25px;
  height: 25px;
  background-color: red;
  border-radius: 0;
  margin-top: 18%;
}

.blue {
  width: 25px;
  height: 25px;
  background-color: blue;
  border-radius: 0;
  margin-top: 6%;
  margin-left: 12%;
}

.yellow {
  width: 25px;
  height: 25px;
  background-color: yellow;
  border-radius: 0;
  margin-top: 18%;
  margin-left: 12%;
}

.green {
  width: 25px;
  height: 25px;
  background-color: green;
  border-radius: 0;
  margin-top: 6%;
}

.first {
  background-color: red !important;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: absolute;
}

.mainColor {
  background-color: red !important;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Paint</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="containter">
    <div id="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
    <div class="yellow"></div>
  </div>
  <script src="script.js"></script>
</body>
</html>

推荐阅读