javascript - 如何使用颜色选择器动态更改单击元素的颜色

Question

我想根据用户偏好动态更改颜色，就像当用户选择一种颜色然后将其同步应用到元素时一样。

就像单击一个元素时，颜色选择器打开，然后它像开发人员工具颜色选择器一样工作，当从选择器中选择一种颜色时，它会应用于元素，如果用户想再次更改颜色比那个还适用的选择器

试图解决以下问题但找不到答案:

Change background colors dynamically using input event

how to dynamically select a color from a color picker by using jQuery?

HTML Input Color Picker, Apply Changes In Sync With Color Picker Selection

我想在下面的代码片段中编写这样的代码，点击哪个元素而不是颜色是该元素的变化。

In original code html is like this : <div id="clockOuterCircle"><div id="clockStyleCircle"></div></div> which can be solved by bubbling/capturing

var reed = document.getElementById("clockOuterCircle");
var reed1 = document.getElementById("clockStyleCircle");
reed.addEventListener('click', deed)
reed1.addEventListener('click', deed)

function deed() {
  var reed2 = document.getElementById("colorClock");
  reed2.click();
  var reed3 = reed2.value;
  // reed1.addEventListener('change', function() {
  this.style.backgroundColor = reed3;
  document.getElementById("demo").innerHTML = reed3;
  //})
}

#clockStyleCircle {
  position: absolute;
  width: 16vw;
  height: 16vw;
  text-align: center;
  padding: 0%;
  top: 28.5%;
  left: 28.5%;
  border-radius: 50%;
  border: 3px solid black;
  background-color: rgb(255, 233, 35);
}

#clockOuterCircle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42vw;
  height: 42vw;
  margin: auto;
  border-radius: 50%;
  border: 4px solid rgb(255, 62, 62);
  background-color: rgb(253, 133, 133);
  user-select: none;
}

<div id="clockStyleCircle"></div>
<div id="clockOuterCircle"></div>
<div id="demo"></div>
<input type="color" name="colorClock" id="colorClock">

动态改变颜色的可能答案如下面的代码片段所示，例如使用
input每个元素上的单独事件。

var reed = document.getElementById("clockOuterCircle");
var reed1 = document.getElementById("clockStyleCircle");
reed.addEventListener('click', deed)
reed1.addEventListener('click', deed)

//function deed() {
//  var reed2 = document.getElementById("colorClock");
//  reed2.click();
//  var reed3 = reed2.value;
// reed1.addEventListener('change', function() {
// this.style.backgroundColor = reed3;
// document.getElementById("demo").innerHTML = reed3;
//})
//}

reed2 = document.getElementById("colorClock");
reed2.addEventListener('input', deed)

function deed() {
  var reed3 = reed2.value;
  reed.style.backgroundColor = reed3;
}

reed4 = document.getElementById("colorClock2");
reed4.addEventListener('input', deed1)

function deed1() {
  var reed5 = reed4.value;
  reed1.style.backgroundColor = reed5;
}

#clockStyleCircle {
  position: absolute;
  width: 16vw;
  height: 16vw;
  text-align: center;
  padding: 0%;
  top: 28.5%;
  left: 28.5%;
  border-radius: 50%;
  border: 3px solid black;
  background-color: rgb(255, 233, 35);
}

#clockOuterCircle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42vw;
  height: 42vw;
  margin: auto;
  border-radius: 50%;
  border: 4px solid rgb(255, 62, 62);
  background-color: rgb(253, 133, 133);
  user-select: none;
}

<div id="clockStyleCircle"></div>
<div id="clockOuterCircle"></div>
<div id="demo"></div>
<input type="color" name="colorClock" id="colorClock">
<input type="color" name="colorClock" id="colorClock2">

但是在上面的方法中，点击元素的颜色不会改变，而是预先定义的固定元素颜色会改变。所以必须分别将代码应用于不同的元素，因为有很多元素所以想要两种方式都应用

提前感谢您的帮助。

Answer 1

已更新以使用 event.stopPropagation() 停止冒泡

如果我没理解错的话，您希望每次单击页面中的任何特定元素时都启动颜色选择器，这样您就可以更改该元素的背景颜色。

此解决方案添加并在单击具有 circle 类的任何元素时启动颜色选择器，然后在选择颜色后再次将其删除。

使用 display:none 隐藏颜色选择器输入，但对话框可见。

let body = document.body;
let circles = document.querySelectorAll('.circle');


circles.forEach((circle) => {

  circle.addEventListener('click', () => {
  
    let existingColourPickers = document.querySelectorAll('input.colour-picker')
    
    existingColourPickers.forEach((existingColourPicker) => {
    
      if (body.contains(existingColourPicker)) {
        body.removeChild(existingColourPicker);
      }
    
    });
        
    event.stopPropagation();
    let colourPicker = document.createElement("input");
       
    colourPicker.type = "color";
    colourPicker.className = "colour-picker";
    body.appendChild(colourPicker); 
    colourPicker.click();
    
    colourPicker.addEventListener("input", () => {
      circle.style.backgroundColor = event.target.value;
    }, false);
    
    colourPicker.addEventListener("change", () => {
      body.removeChild(colourPicker);
    }, false);
    
  });
  
});

#clockStyleCircle {
  position: absolute;
  width: 16vw;
  height: 16vw;
  text-align: center;
  padding: 0%;
  top: 28.5%;
  left: 28.5%;
  border-radius: 50%;
  border: 3px solid black;
  background-color: rgb(255, 233, 35);
  z-index:1;
}

#clockOuterCircle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42vw;
  height: 42vw;
  margin: auto;
  border-radius: 50%;
  border: 4px solid rgb(255, 62, 62);
  background-color: rgb(253, 133, 133);
  user-select: none;
}

#another-circle {
  width:50px;
  height:50px;
  border-radius: 50%;
  border: 4px green solid;
  background-color:blue;
  position:absolute;
  top:20px;
  left:20px;
}
.colour-picker {
  display:none;
}

<body>
  <div id="clockOuterCircle" class="circle">
    <div id="clockStyleCircle" class="circle"></div>
  </div>
  <!-- another circle -->
  <div id="another-circle" class="circle"></div>
  <!-- ... -->
</body>