如何将背景颜色更改为用户在HTML中输入的颜色
如何将背景颜色更改为用户在HTML中输入的颜色
提问于 2018-07-23 02:33:04
我正在尝试使我的网站，以便用户可以输入颜色使用颜色选择器，然后它改变背景颜色到那个。这就是我到目前为止所知道的：
function color_change() {
alert("I will make it the color you have choosen.")
var back = document.getElementById("color")
var new_color = document.getElementById("change").value
// What goes here?
}#color {
background-color: #FFFFFF;
}<HTML>
<div id = "color">
Change the Color
<br>
<input id = "change" type = "Color">
<button onclick="color_change()">Make it this color!</button>
</div>
</HTML>
我试过了，但它所做的一切都是一个错误。有谁知道怎么让它工作吗？我想让用户通过点击这个框来输入一种颜色。当他们单击该框时，将打开拾色器。然后，当他们点击Make it this Color！按钮，它会将div的背景设置为他们放入的颜色。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-23 03:21:02
您需要将color div元素的背景色设置为新选择的颜色。您已经正确地从颜色输入元素检索颜色值，并将其存储在new_color变量中。
可以通过style对象将CSS样式设置选项应用于元素。这将公开Stylesheet和CSSStylesheet接口以供您操作。它可以获取和设置样式。在您的示例中，您希望设置元素的背景颜色。因此，您必须使用javascript获取元素，然后访问style对象，然后访问backgroundColor属性，然后可以将该属性设置为等于颜色输入元素的颜色值：
document.querySelector("#color").style.backgroundColor = "{any css colour value}"下面是利用这一点的调整过的代码片段。
function color_change() {
alert("I will make it the color you have choosen.")
var back = document.getElementById("color")
var new_color = document.getElementById("change").value
// Apply background color to div#color element
back.style.backgroundColor = new_color;
}#color {
background-color: #FFFFFF;
}<div id="color">
Change the Color
<br>
<input id="change" type="color">
<button onclick="color_change()">Make it this color!</button>
</div>
您可以在here上阅读有关style对象及其功能的更多信息。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51468116
复制相关文章
相似问题
腾讯云开发者
