css - 通过提交表单更改 div 的背景颜色？

Question

有点不确定如何表达这个，JavaScript 是我需要学习的主要内容，但是在投入了数小时之后，我仍然无法写出 JavaScript 代码。我了解几乎所有内容的语法，但在将其与 css 或 html 集成时，我一无所知!

代码如下:

HTML:

<div id="mydiv">
<input type="text" name="colorpicker">
<input type="submit" value="Submit">
</div>

JavaScript:

document.getElementById("mydiv").style.backgroundColor="colorpicker.Submit";

切记，我对 html 中的表单和输入也没有什么经验。

任何答复将不胜感激!谢谢!

Answer 1

style.backgroundColor 的值应该是表示 CSS 中使用的颜色值的字符串，可以是以下之一:

• 颜色名称，例如红色、绿色、粉红色……
• 颜色十六进制代码，例如#ff0000(或#f00)、#00ff00、#ff00ff ...
• rgb() 或 rgba() 函数如 rgb(255,0,0), rgb(0,255,0), ...

您还必须为按钮提交设置点击事件处理程序。以下是详细信息:

HTML:

<div id="mydiv">
  <input type="text" name="colorpicker"/>
  <input type="submit" value="Submit"/>
</div>    

JS:

var div = document.getElementById('mydiv');
div.children[1].onclick = function(){
   div.style.backgroundColor = div.children[0].value;
};

请注意，您可以为每个输入字段分配一个 id 以在 JS 代码中访问它，在上面的代码中，我使用 children 集合来访问它们。第一个输入字段是 div 的第一个子项，第二个输入字段是 div 的第二个子项。

Demo

另请注意，由于 HTML5(所有主要浏览器均已支持)，您可以使用颜色输入字段，它可以弹出一个真正的颜色选择器对话框供用户选择，然后您只需要处理事件 onchange 获取选定的颜色(通过 value 属性)，如下所示:

HTML:

<div id="mydiv">
  <input type="color" name='colorpicker'/>    
</div>

JS:

var div = document.getElementById('mydiv');
div.children[0].onchange = function(){
  div.style.backgroundColor = div.children[0].value;
};

Updated Demo.