本次案例主要是通过获取元素,元素实现点击事件触发给另一个元素修改成另一种样式。
首先看一下第一个版本,非常麻烦,但是实现起来相对比较容易。
展示一下它的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>
以上的版本需要思考的地方:如果需要触发更多的事件,一个个的调用还是非常麻烦的,需要我们可以试试用动态实现,将颜色存放在数组里。可以在评论上展示一下你们的见解,怎样实现更多按钮点击之后可以切换更多的颜色!