JavaScript单击变色再次点击还原 |
您所在的位置:网站首页 › vue点击变色再点击还原 › JavaScript单击变色再次点击还原 |
JavaScript单击变色再次点击还原属于前端实例代码,有关更多实例代码大家可以查看。 本章节介绍一下如何利用JavaScript实现点击一个元素事背景变色,再点击,颜色还原。 代码实例如下: 前端教程网 a{ width:100px; height:25px; line-height:25px; font-size:12px; display:block; background:#CCC; text-decoration:none; text-align:center; color:red; } 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"; } } } 前端教程网点击按钮可以实现背景色切换效果,下面介绍一下实现过程。 一.代码注释: (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 取模运算符一章节。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |