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

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

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

$（'body'）。单击（函数（事件）{
警报（$（event.target.attr（'class'））；
var colorWell；
var defaultColor=“#0000ff”；
window.addEventListener（“加载”，启动，错误）；
函数启动（）{
colorWell=document.querySelector（#colorWell”）；
colorWell.value=默认颜色；
addEventListener（“输入”，updateFirst，false）；
addEventListener（“更改”，updateAll，false）；
colorWell.select（）；
}
函数updateFirst（事件）{
var p=event.target.id；
如果（p）{
p、 style.color=event.target.value；
}
}
函数updateAll（事件）{
document.queryselectoral（“p”）.forEach（函数（p）{
p、 style.color=event.target.value；
});
}
})

颜色：

您在body click上调用整个代码段，这意味着您要附加

窗口的行。onload在已经发生的window onload上被调用。您可以在单击body时调用方法startup。如果要在body load时调用startup，则必须删除body o'clock方法或在body单击之前移动window.onload


$（文档）。单击（函数（事件）{
更改（event.target，{left:event.pageX，top:event.pageY}）；
});
$（（）=>{$（'#colorWell'）。on（'click'，（e）=>e.stopPropagation（）；}）；
var defaultColor=“#0000ff”；
功能变更（目标、pos）{
var picker=$（“#colorWell”）；
picker.css（pos.off（'change'）；
setTimeout（（）=>picker.click（），50）；
选择器on（'change'，函数（e）{
$（target.css（{color:$（this.val（）| | defaultColor}）；
css（{top:'-50px'}）；
});
}
#colorWell{
位置：绝对位置；
顶部：-50px；
}

点击我的p标签

单击me div标记
您的JSFIDLE链接已断开请参见此链接中的最后一个示例谢谢，输入类型标记应隐藏&此颜色选择器应可用于任何元素，只需单击它，而我们不需要任何元素的id。所以，当用户单击未知元素时，该元素的id应该成为目标id。我认为我们应该使用$（'body'）.on（'click'，函数（e）{alert（e.target.id）；}）；&此代码也可以通过e.target.id上的JavaScript动态生成。应用新颜色后，此“输入类型”标记html行也将removed@gigabyteservice这是你需要的吗？更新后的回答更好，但此代码仅适用于字体颜色，因为我想更改bg颜色，但它不起作用&而且她还需要可以动态生成输入类型$（文档）的代码。单击（函数（事件）{if（event.target.id）{var pratik=event.target.id；var newElem=document.createElement（'input'）；newElem.type=“color”；newElem.id=“colorWell”document.getElementById（pratik）.appendChild（newElem）；}更改颜色后，我还想删除元素，因此remove（）就足够了。我无法理解您到底需要什么