通过提交表单更改div的背景颜色?

时间:2014-04-18 23:33:48

标签: css selector

有点不确定怎么说这个,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中的表单和输入也没什么经验。

任何回复都会很受欢迎!谢谢!

2 个答案:

答案 0 :(得分:0)

使用表单标签onsubmit方法调用您的JavaScript函数。

答案 1 :(得分:0)

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(所有主流浏览器都支持),您可以使用颜色输入字段,该字段可以弹出真正的颜色选择器对话框供用户选择,然后您只需要处理事件{ {1}}获取所选颜色(通过onchange属性),如下所示:

<强> HTML

value

<强> JS

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

Updated Demo.