JavaScript点击按钮切换背景颜色
本章节分享一段代码实例，它实现了点击按钮动态设置网页背景颜色效果。
代码非常的简单，比较适合初学者参考之用。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<script>
var arr=["#FFFF00","#D8BFD8","#DDA0DD","#FF0000"];
window.onload=function(){
var form=document.forms[0];
var inputs=form.getElementsByTagName("input");
for(var index=0;index<inputs.length;index++){
inputs[index]._index=index;
inputs[index].onclick=function(){
document.body.style.backgroundColor=arr[this._index];
}
}
}
</script>
</head>
<body >
<center>
<form>
<input type = button value = "Make Yellow"/>
<input type = button value = "Make background Thistle"/>
<input type = button value = "Make background Plum"/>
<input type = button value = "Make background Red"/>
</form>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.var arr=["#FFFF00","#D8BFD8","#DDA0DD","#FF0000"]，创建一个数组，里面存储的是颜色值。
（2）.window.onload=function(){}，当文档内容完全加载完毕再去执行函数中的代码。
（3）.var form=document.forms[0]，document.forms能够获取文档中的所有form元素，forms[0]就是第一个form。
（4）.var inputs=form.getElementsByTagName("input")，获取form表单下的所有input元素。
（5）.for(var index=0;index<inputs.length;index++){},遍历每一个input元素。
（6）.inputs[index]._index=index，为当前的input元素添加一个自定义属性_index，属性值为当前元素的索引。
（7）.inputs[index].onclick=function(){
document.body.style.backgroundColor=arr[this._index];
}，为input元素注册click事件处理函数，点击按钮讲网页的背景设置为数组中对应索引的颜色。
二.相关阅读:
（1）.document.forms参阅document.forms集合一章节。
（2）.getElementsByTagName()参阅document.getElementsByTagName()一章节。