javascript为div指定自己的颜色

我的问题是我有我创建的便笺，但每次我创建一个新便笺时，我可以更改新便笺的颜色，但我可以更改第一个便笺上的颜色，然后更改所有便笺上的颜色。 我想为每个人挑选一种颜色，这样他们就可以拥有自己独特的颜色。 这是我的密码笔： 创建新便笺时会发生这种情况：

createNote = function(){
        var stickerEl = document.createElement('div'),
            barEl = document.createElement('div'),
            color = document.createElement('button'),
            colorIcon = document.createElement('i'),
            deleteBtn = document.createElement('button'),
            deleteBtnIcon = document.createElement('i'),
            moveIcon = document.createElement('i'),
            colorEl = document.createElement('input'),
            textareaEl = document.createElement('textarea');

        var transformCSSValue = "translateX(" + Math.random() * 800 + "px) translateY(" + Math.random() * 400 + "px)";

        stickerEl.style.transform = transformCSSValue; 

        barEl.classList.add('bar');
        stickerEl.classList.add('sticker');
        color.classList.add('color');
        deleteBtn.classList.add('deleteBtn');
        deleteBtnIcon.classList.add('ion-android-delete');
        colorIcon.classList.add('ion-android-color-palette');
        stickerEl.id = "rect" + totalNotes++;

        colorEl.classList.add('jscolor');
        colorEl.onchange = function(){update(this.jscolor)};
        colorEl.value = "cc66ff";

        stickerEl.append(barEl);
        stickerEl.append(color);
        stickerEl.append(deleteBtn);
        stickerEl.append(colorEl);
        stickerEl.appendChild(textareaEl); 
        color.append(colorIcon);
        deleteBtn.append(deleteBtnIcon);
        barEl.append(moveIcon);

        stickerEl.addEventListener('mousedown', onDragStart, false);

        document.body.appendChild(stickerEl);

    };

---

那么我能做些什么来改变每个音符的颜色呢

好的，我来描述一下我是如何使它工作的

• 把jscolor.js的代码放上去，因为完整的解决方案依赖于该库

• 在第1850行初始化jscolor库

• 修改createNote方法，从此

  colorEl.classList.add('jscolor');
  colorEl.onchange = function(){update(this.jscolor)};
  colorEl.value = "cc66ff";
  

  var colorCall = document.getElementsByClassName('sticker');
  var NotesCall = Array.prototype.filter.call(colorCall, 
  function(colorCall){
  return colorCall.style.backgroundColor =  "#" + jscolor;
  

  对此

  colorEl.classList.add('jscolor');
  colorEl.value = "cc66ff";  
  var picker = new jscolor(colorEl);
  colorEl.onchange = function(){ update(colorEl.value)};
  

  var colorCall = document.querySelectorAll(".jscolor-active");
  var NotesCall = Array.prototype.filter.call(colorCall,                 
  function(colorCall){
    return colorCall.parentNode.style.backgroundColor =  "#" + jscolor;
  });
  

  这是专门为创建新便笺时创建选择器而创建的

• 修改此文件中的更新方法

  colorEl.classList.add('jscolor');
  colorEl.onchange = function(){update(this.jscolor)};
  colorEl.value = "cc66ff";
  

  var colorCall = document.getElementsByClassName('sticker');
  var NotesCall = Array.prototype.filter.call(colorCall, 
  function(colorCall){
  return colorCall.style.backgroundColor =  "#" + jscolor;
  

  对此

  colorEl.classList.add('jscolor');
  colorEl.value = "cc66ff";  
  var picker = new jscolor(colorEl);
  colorEl.onchange = function(){ update(colorEl.value)};
  

  var colorCall = document.querySelectorAll(".jscolor-active");
  var NotesCall = Array.prototype.filter.call(colorCall,                 
  function(colorCall){
    return colorCall.parentNode.style.backgroundColor =  "#" + jscolor;
  });
  

  基本上改变它选择要改变颜色的项目的方式

这是它的代码笔：

希望能有帮助