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

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 上被调用，这已经发生了。 您可以在正文单击时调用方法启动。 如果你想在身体负载上调用启动，你必须在身体点击之前移除身体点钟方法或移动 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 代码可以改变任何 div 被它的 id 点击。

 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;">