一、需要掌握的知识
- 双重for循环的一些理解
- 怎么获取元素
- 获取元素选择用什么？getElementsByTagName？
- html按钮
- 怎么修改样式属性？this.xxx?
二、思路
阐述
首先是获取button元素，在想着有五个按钮，不可能都写一个事件吧，在想着回顾前面的知识for循环，很适合，点击第btns[i]按钮的时候，之前点过的btns[i-1]怎么办呢，这就想着用双重for循环了，走一遍for循环，当用户点击btns[i]按钮的时候，里面的for循环吧点击过的按钮背景色都变成空，下面还有一句然后再把用户点击的那个按钮背景色变成pink，双重for循环原理外面循环执行依次，里面循环执行全部
代码如下（示例）：
<body>
<div class="box">
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
</div>
<script>
var btns=document.getElementsByTagName('button');
for(var i=0;i<btns.length;i++){
btns[i].onclick=function(){
for(var i=0;i<btns.length;i++){
btns[i].style.backgroundColor='';
}
this.style.backgroundColor = 'pink';
}
}
</script>总结
以上就是今天阐述的小练习，本文讲的是前端初学者的一个回顾，for循环目的是和现在学的进行一个交互融合。
1085
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
