如何使用onclick根据颜色选择器的值更改元素的颜色

我们可以通过 input type=”color” 来定义颜色选择器. 它提供了一个用户界面元素，用户可以通过使用可视化的颜色选择器界面或在#rrggbb十六进制格式的文本字段中输入颜色来指定颜色. 只允许使用没有alpha通道的颜色. 尽管 CSS颜色 有更多的格式，例如颜色名称、功能记法和带有alpha通道的十六进制格式.

方法:

为了基于颜色选择器的值更改元素的颜色，我们必须使用元素的 onclick()事件 ，并根据颜色选择器元素中选择的值来更改其CSS颜色属性。
这个值会显示为颜色选择器的value属性。使用javascript，我们将根据颜色选择器中选择的值来更改我们元素的颜色。

语法：

<div id="elementId" onclick="fn_name()"></div>
      < input name="ColorPickerId" type="color" id="ColorPickerName" />
</div>
<script>
    document.getElementById("elementID").style.Color = 
    document.getElementById("ColorPickerId").value;
</script>

示例 1：

<style> 
    #Myelement { 
        background-color: black; 
        width: 500px; 
        height: 100px; 
    } 
</style> 
<div id="Myelement" onclick="changeColor()"> 
</div> 
<input name="MyColorPicker" type="color" id="MyColorPicker" /> 
<script> 
    function changeColor() { 
        document.getElementById( 
        "Myelement").style.backgroundColor = 
            document.getElementById( 
        "MyColorPicker").value; 
    } 
</script>

输出：

如何使用onclick根据颜色选择器的值更改元素的颜色

示例 2:

<h1 id="Myelement" onclick="changeColor()"> 
    GeeksforGeeks 
</h1> 
<input name="MyColorPicker" type="color" id="ColorPicker1" /> 
<script> 
    function changeColor() { 
        document.getElementById("Myelement").style.color = 
            document.getElementById("ColorPicker1").value; 
    } 
</script>

输出：

如何使用onclick根据颜色选择器的值更改元素的颜色