JavaScript单击变色再次点击还原
分类:实例代码
JavaScript单击变色再次点击还原属于前端实例代码,有关更多实例代码大家可以查看。
本章节介绍一下如何利用JavaScript实现点击一个元素事背景变色,再点击,颜色还原。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> a{ width:100px; height:25px; line-height:25px; font-size:12px; display:block; background:#CCC; text-decoration:none; text-align:center; color:red; } </style> <script type="text/javascript"> window.onload=function(){ var olink=document.getElementById("link"); var count=0; olink.onclick=function(){ count=count+1; if(count%2==0){ olink.style.backgroundColor="#CCC"; } else{ olink.style.backgroundColor="#60C"; } } } </script> </head> <body> <a href="#" id="link" javascript:void(0)>前端教程网</a> </body> </html>
点击按钮可以实现背景色切换效果,下面介绍一下实现过程。
一.代码注释:
(1).window.onload=function(){},当文档内容完全加载完毕再去执行函数中的代码。
(2).var olink=document.getElementById("link"),获取链接对象。
(3).var count=0,声明一个变量,并赋初值为0,每点击一次值加1。
(4).olink.onclick=function(){},为链接注册click事件处理函数。
(5).count=count+1,每点击一次,count值加1。
(6).if(count%2==0),判断取模的值是0还是1,每点击一次都会不同。
(7).olink.style.backgroundColor="#CCC",设置背景颜色。
二.相关阅读:
(1).onclick事件参阅JavaScript click 事件一章节。
(2).%运算符参阅JavaScript 取模运算符一章节。
JavaScript单击变色再次点击还原,这样的场景在实际项目中还是用的比较多的,关于JavaScript单击变色再次点击还原就介绍到这了。