Question

我想更改单击元素的颜色。我试过了，但是没有用。当用户单击任何元素（例如页脚）时，应在单击该元素后出现“ htm5颜色选择器”，然后用户可以从中选择颜色，并且所选颜色应立即应用。我不想保存在数据库中或使用ajax + php，请参见下面的代码

也许我们可以使用setAttribute（“ style”，“”）添加内联CSS。

$('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

您将在单击主体时调用整个代码段，这意味着您已附加window.onload的行在已经发生的窗口加载时被调用。您可以仅在单击主体时调用方法启动。如果要在加载身体时调用启动，则必须在单击身体之前删除显示时的方法或移动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>

Answer 2

简单的js代码，可更改其ID点击的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;">

使用颜色选择器更改单击元素的颜色

2 个答案: