Изменить цвет элемента, на который нажали, с помощью палитры цветов

Question

Я хочу изменить цвет кликаемого элемента.Я попробовал это, но не работал.Когда пользователи щелкают по любому элементу, например, нижнему колонтитулу, после нажатия на этот элемент должно появиться «средство выбора цвета htm5», после чего пользователи могут выбирать из него цвет, и этот выбранный цвет должен применяться немедленно в режиме реального времени.Я не хочу сохранять в своей базе данных или использовать ajax + php. См. Мой код ниже

. Может быть, мы можем добавить встроенный CSS с помощью setAttribute ("style", "").

$('body').click(function(event) {
  alert($(event.target).attr('class'));
  var colorWell;
  var defaultColor = "#0000ff";

  window.addEventListener("load", startup, false);

  function startup() {
    colorWell = document.querySelector("#colorWell");
    colorWell.value = defaultColor;
    colorWell.addEventListener("input", updateFirst, false);
    colorWell.addEventListener("change", updateAll, false);
    colorWell.select();
  }


  function updateFirst(event) {

    var p = event.target.id;

    if (p) {
      p.style.color = event.target.value;
    }
  }

  function updateAll(event) {
    document.querySelectorAll("p").forEach(function(p) {
      p.style.color = event.target.value;
    });
  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label for="colorWell">Color:</label>
<input type="color" value="#ff0000" id="colorWell">

Answer 1

Простой js-код, который изменяет любой щелчок div по его идентификатору.

var actualDiv = null;
function changeColor(id) {
  actualDiv = id;
	  $("#colorWell")[0].click();
  }
  $('#colorWell').change(function() {       document.getElementById(actualDiv).style.backgroundColor = document.getElementById("colorWell").value; 
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div for="my-color" onclick="changeColor('divId')" id="divId" 
	style="border: 1px solid black; width: 250px; height: 250px; background-color: white;"></div>
	
<div for="my-color" onclick="changeColor('divId2')" id="divId2" 
	style="border: 1px solid black; width: 250px; height: 250px; background-color: white;"></div>
	
<input type="color" value="#ff0000" id="colorWell" style="opacity: 0; visibility: hidden; position: absolute;">

Answer 2

Вы вызываете весь фрагмент по щелчку тела, это означает, что строка, к которой вы присоединяете window.onload, вызывается при загрузке окна, которая уже произошла.Вы можете просто вызвать метод запуска по клику тела.Если вы хотите вызвать автозагрузку при загрузке тела, вам нужно удалить метод body o'clock или переместить window.onload до щелчка тела.

$(document).click(function(event) {
  change(event.target, {left: event.pageX, top: event.pageY});
});

$(()=>{ $('#colorWell').on('click', (e) => e.stopPropagation()); });

var defaultColor = "#0000ff";
function change(target, pos) {
  var picker = $('#colorWell');
  picker.css(pos).off('change');
  setTimeout(() => picker.click(), 50);
  picker.on('change', function(e){
    $(target).css({color: $(this).val() || defaultColor});
    picker.css({top: '-50px'});
  });
}

#colorWell {
  position: absolute;
  top: -50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="color" value="#ff0000" id="colorWell">

<p> click Me P tag</p>

<div> click me div tag </div>