如何将背景颜色更改为用户在HTML中输入的内容?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (52)

我正在尝试创建我的网站,以便用户可以使用颜色选择器输入颜色,然后将背景颜色更改为该颜色。这是我到目前为止:

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的背景设置为它们放入的颜色。

提问于
用户回答回答于

你需要将colordiv元素的背景颜色设置为新选择的颜色。你已正确设法从颜色输入元素中检索颜色值并将其存储在new_color变量中。

你可以通过style对象将CSS样式选项应用于元素。这将公开样式表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>

扫码关注云+社区

领取腾讯云代金券