点击不同div添加不同背景实例

点击添加背景是初步学习js时的知识，一般来说是比较简单的脚本就可以实现的，但是如果在不同的div上点击从而给添加不同的div背景那？

我们初步感受一下这个页面中有着四个div，只是里面的数字不同而已，其他的没什么不同的；而我们的任务就是实现点击div，div自己就会添加一个背景。

如图，我们点击了一下1 div，这个div的背景色从白色变为橙色，通常我们只需要一个onclick事件就行；但是这里有四个，难道我们要定义四个变量？写四个事件？那么如果有更多的div怎么办？

就像这种情况，四个div有着四个不同的背景，虽然只是背景不同，但是如果用简单变量事件那么代码就会非常繁琐和重复。

下图是页面的架构代码，简单的看一下，只是定义了四个div和在style标签上写出了css样式，并且没有定义背景。

下图代码就是我们脱离繁琐重复，就可以完成的要求效果（重复的事情用循环是一个非常好的方式），对于定义数组存放背景颜色，就不详细解释了，关键是循环时的一一对应，用index添加索引对应i以此达到对应实现的效果。

版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。