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

标签 javascript html css colors color-picker

我想将对象的背景颜色更改为输入类型颜色(颜色选择器)中的值。当您单击该对象时。到目前为止,这就是我得出的结论。

GetColor(id)
        {
            document.getElementById(id).style.backgroundColor = document.getElementById("Color Picker").value;
        }
<div style="background-color:black; outline-color:black; outline-width:2px; width:500px; height:500px;"  id="ExtentionBody" onclick="GetColor('ExtentionBody')"></div>
        <div><input name="Color Picker" type="color" id="Color Picker"/></div>

最佳答案

在您的 Javascript 代码中,缺少关键字 function,因此无法调用 GetColor。添加此关键字后,它可以正常工作:

function GetColor(id)
{
document.getElementById(id).style.backgroundColor = 
    document.getElementById("Color Picker").value;
}
<div style="background-color:black; 
        outline-color:black; 
        outline-width:2px; 
        width:500px; 
        height:100px;"  
     id="ExtentionBody" 
     onclick="GetColor('ExtentionBody')">
</div>
<div><input name="Color Picker" type="color" id="Color Picker"/></div>

关于javascript - 如何根据颜色选择器值 onclick 的值更改元素颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57410826/

相关文章:

javascript - 如何在AngularJS中设置下拉列表的默认值

javascript - 在前端 javascript 应用程序中使用 DI 容器是否有意义

java - 如何将 jscolor 选择器设置为 bs 按钮

css - 粘性页脚未到达浏览器窗口的右侧和左侧

html - 充满了在背景颜色后面的 y 轴上重复的背景图像

javascript - 没有 jQuery-UI 的简单 jQuery 可拖动实现 - 如何关闭?

javascript - 捆绑和缩小以及异步/等待

html - CSS - UL parent 比 child 小

html - 是否可以使用 HTTP 请求获取 Google map 路线?

html - 响应式侧边栏 wordpress 主题