如何根据单击时颜色选择器值的值更改元素颜色？

HTML 标签提供了一个用户界面元素，让用户可以在视觉颜色选择器界面的帮助下或通过以#rrggbb十六进制格式将颜色值输入到文本字段中来指定颜色。尽管 CSS 颜色有更多格式，例如颜色名称、功能符号和带有 alpha 通道的十六进制格式，但只允许使用简单的颜色(没有 alpha 通道)。

例子：

html

    
          
GeeksforGeeks
  
        Color:
        
          
A Computer Science Portal For Geeks.
  
        
            var colors;
            var defaultColor = "#0000ff";
            window.addEventListener("load", startup, false);
            function startup() {
                colors = document.querySelector("#colors");
                colors.value = defaultColor;
                colors.addEventListener("input", updateFirst, false);
                colors.addEventListener("change", updateAll, false);
                colors.select();
            }
            function updateFirst(event)
            {
                var p = document.querySelector("p");
                if (p) 
                {
                    p.style.color = event.target.value;
                }
            }
            function updateAll(event) {
                document.querySelectorAll("p").forEach(function (p) 
                {
                    p.style.color = event.target.value;
                });
            }
        
    

输出：