时间戳

首页 > 解决方案 > 如何将背景颜色更改为用户在 HTML 中输入的内容

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

问题描述

我正在尝试制作我的网站，以便用户可以使用颜色选择器输入颜色，然后将背景颜色更改为该颜色。这是我到目前为止所拥有的：

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

标签： javascripthtmlbackground

解决方案

您需要将colordiv 元素的背景颜色设置为新选择的颜色。您已经成功地从颜色输入元素中检索颜色值并将其存储在new_color变量中。

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

您可以在此处阅读有关该style对象及其功能的更多信息。

推荐阅读