如何使用颜色选择器更改图像颜色?

我尝试使用颜色选择器更改图片的颜色，但我还不明白该怎么做。这是我到目前为止得到的代码：

<html> 

<head> 
</head> 

<body> 
<img src="Other img/SPIRAL.png"  id="Img1"  />
<div id="Img1" 
onclick="changeColor()"> 
</div> 
<input name="MyColorPicker"
type="color"
id="MyColorPicker" /> 
<script> 
function changeColor() { 
document.getElementById( 
"Img1").style.color = 
document.getElementById( 
"MyColorPicker").value; 
} 
</script> 
</body>

我在输入而不是div 上使用函数：

function changeColor() { 
document.getElementById("img1").style.backgroundColor =  document.getElementById( 
"MyColorPicker").value; 

}

<div id="img1">I will change color</div> 
<input name="MyColorPicker"
type="color"
id="MyColorPicker"  onchange="changeColor()" /> 
<script> 

</script>

不带文本：

function changeColor() { 
document.getElementById("img1").style.backgroundColor =  document.getElementById( 
"MyColorPicker").value; 

}

<div id="img1" style="height:100px"></div> 
<input name="MyColorPicker"           type="color"
id="MyColorPicker"  onchange="changeColor()" /> 
<script> 

</script>

相关内容

最新更新

热门标签：