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

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

方法：

• 要根据颜色选择器的值更改元素的颜色，我们必须使用元素的 onclick() 事件并根据颜色选择器元素中的选定值更改其 CSS 颜色属性。
• 此值显示为颜色选择器的值属性。使用 javascript，我们将元素的颜色更改为颜色选择器中的选定值。

句法：

• HTML：

  < div id="elementId" onclick="fn_name()">

  < input name="ColorPickerId" type="color" id="ColorPickerName" />

JavaScript：

document.getElementById("elementID").style.Color = 
      document.getElementById("ColorPickerId").value;

示例 1：

  

    
        #Myelement {
            background-color: black;
            width: 500px;
            height: 100px;
        }
    

  

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

  

输出：
前：

选好颜色后：

点击 div 后：

示例 2：

  


  

    
        GeeksforGeeks
    
    
    
        function changeColor() {
            document.getElementById("Myelement").style.color =
                document.getElementById("ColorPicker1").value;
        }
    

  

输出：
前：

选好颜色后：

点击 div 后：