本次案例主要是通过获取元素，元素实现点击事件触发给另一个元素修改成另一种样式。
首先看一下第一个版本，非常麻烦，但是实现起来相对比较容易。
展示一下它的div情况，css样式你们可以自行设计哈！
<div id="content"><button type="button" id="but01">红色</button><button type="button" id="but02">蓝色</button><button type="button" id="but03">绿色</button><button type="button" id="but04">重置</button><div class="side" id="mybox"> // 这里应该使用驼峰命名,自行修改一下这里是显示背景的框</div></div>
第一个JavaScript的版本，一个蠢方法，仅供参考，一定将它要改进优化掉。
// 一个个的获取到元素var but01 = document.getElementById("but01");var but02 = document.getElementById("but02");var but03 = document.getElementById("but03");var but04 = document.getElementById("but04");var mybox = document.getElementById("mybox");// 并且一个个的添加事件but01.onclick = function () {mybox.style.background = "red";}but02.onclick = function () {mybox.style.background = "yellow";}but03.onclick = function () {mybox.style.background = "green";}but04.onclick = function () {mybox.style.background = "#eb8686";}// 缺点：代码重复性大，工作量剧增。
第二个JavaScript的版本，这个版本实现了、、优化，运用到调用有参函数的知识点，整体还是比较好理解的。仅供参考，依然有需要优化的地方，发挥你的想象去思考吧！div样式的中的id需要调整一下，你们结合Script代码修改一下吧。
// 获取元素function getId(ids) {return document.getElementById(ids);}// 绑定事件function getOnClick(getIds, color) {getIds.onclick = function () {getId("myDiv").style.backgroundColor = color;}}// 调用函数getOnClick(getId("red"), "red");getOnClick(getId("blue"), "blue");getOnClick(getId("green"), "green");getOnClick(getId("but04"), "white");
第三个JavaScript的版本，代码量减少，但需要一个个添加点击事件，仅供参考，仍然有需要优化的地方。
<body><div id="content"><button type="button" onclick="setColor('red');">红色</button><button type="button" onclick="setColor('blue');">蓝色</button><button type="button" onclick="setColor('green');">绿色</button><button type="button" onclick="setColor('#fff');">重置</button><div class="side" id="myDiv">这里是显示背景的框</div></div></body><script>// 第三个版本var myDiv = document.getElementById("myDiv");function setColor(color) {myDiv.style.backgroundColor = color;}</script>
以上的版本需要思考的地方：如果需要触发更多的事件，一个个的调用还是非常麻烦的，需要我们可以试试用动态实现，将颜色存放在数组里。可以在评论上展示一下你们的见解，怎样实现更多按钮点击之后可以切换更多的颜色！
