JavaScript单击变色再次点击还原

您所在的位置:网站首页 vue点击变色再点击还原 JavaScript单击变色再次点击还原

JavaScript单击变色再次点击还原

2023-10-17 20:34| 来源: 网络整理| 查看: 265

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