建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > 网页设计 > JavaScript教程 >

JavaScript实现点击按钮改变颜色,再次点击还原颜色

更新时间:2022-11-08整理编辑:建站学习网阅读:0

JavaScript单击变色再次点击还原,这样的场景在实际项目中还是用的比较多的,本文介绍一下如何利用JavaScript实现点击一个元素事背景变色,再点击,颜色还原。


代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dedexuexi.com/" />
<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",设置背景颜色。


关于JavaScript单击变色再次点击还原建站学习网就介绍到这了。


本文网址:https://www.dedexuexi.com/wysj/javascript/3502.html

本站部分文章搜集与网络,如有侵权请联系本站,转载请说明出处。

标签:JavaScript
收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

支付宝打赏
微信打赏
js生成随机数(指定范围)的实例代码
« 上一篇2022年11月18日
js锚点链接点击锚点后不改变url的方法
2022年11月18日下一篇 »
  • JS实现显示部分文字点击显示全部的示例
    0阅读
    JS如何实现显示部分文字,点击又显示全部的呢?代码如下:建站学习网建站学习网建站学习网建站学习网建站学习网建站学习网建站学习网建站学习网建站学习网建站学习网建站学习网建站学习网建站学习网建站学习网建站学习网建站学习网建站学习网建站学习functionshow(){varpp=documen...
  • 纯手工JS写法tab切换特效代码,菜单导航切换效果
    0阅读
    本文主要为大家详细介绍了js实现tab栏切换特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。思路:1.点击每个tab时。要先用排他思想,使得所有li不加上背景,再让点击的tab加上某个类。2.上面的tab与下面显示内容的页面是一一对应的。因此,可以使用自定义属性,...
  • js实现禁止右键(复制)
    0阅读
    一个防君子不防小人的鸡肋的功能,针对小白还行。JS实现禁止右键(复制)如何实现呢,代码如下:document.oncontextmenu=new Function("event.returnValue=false;");document.onselectstart=new Function("eve...
  • js锚点链接点击锚点后不改变url的方法
    0阅读
    前端当中html锚点链接的用法很简单,相信大家都会:点击我头部然而这样使用会产生一个现象,那就是url会被改变,浏览器默认的行为会将id放在url后面。比如:https://www.dedexuexi.com#box这种写法体验效果极差,那么有没有什么方法不改变URL呢?这里就不多废话了,直接上代码...
  • js生成随机数(指定范围)的实例代码
    0阅读
    1、随机生成4位数的随机数/*** 随机生成4位的随机数* http://www.dedexuexi.com*/document.write(parseInt(10*Math.random()));  //输出0~10之间的随机整数document.write(Math.floor(Math.ran...
 
QQ在线咨询