简单的JS控制button颜色随点击更改的实现方法


Posted in Javascript onApril 17, 2017

先上效果图:

简单的JS控制button颜色随点击更改的实现方法

默认“今日”是选中状态,是行内样式:

<button type="button" id="today" class="btn-link" onclick="todayDate()" style="color: #0062CC;">今日</button>

上面的日期都是点击才会切换颜色:

点击其它颜色,“今日”颜色更换成灰色

再次点击“今日”,还原回默认状态颜色

在除“今日”外的其它任一个日期中添加一个点击事件,可以实现【改变“今日”默认颜色状态】

在“今日”的点击事件中添加【还原‘‘今日''的默认状态颜色】

//昨日click
function yesterdayDate() {
  document.getElementById('title').value = getYesterdayDate(new Date());
  fetYesterdayData();
  today.css('color','#555555');
}
//今日click
function todayDate() {
  document.getElementById('title').value = formatterDateStr(new Date());
  fetTodayData();
  today.css('color','#0062cc');
}

OK,完成

以上这篇简单的JS控制button颜色随点击更改的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
Jan 22 Javascript
jquery弹出框的用法示例(2)
Aug 26 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
JQuery实现表格动态增加行并对新行添加事件
Jul 30 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
Javascript的表单验证-提交表单
Mar 18 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 Javascript
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
vue+element-ui动态生成多级表头的方法
Aug 28 Javascript
JavaScript实现新年倒计时效果
Nov 17 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 Javascript
Vue 设置axios请求格式为form-data的操作步骤
Oct 29 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 #jQuery
Vue分页组件实例代码
Apr 17 #Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 #Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 #Javascript
老生常谈jacascript DOM节点获取
Apr 17 #Javascript
老生常谈combobox和combotree模糊查询
Apr 17 #Javascript
vue实现简单表格组件实例详解
Apr 16 #Javascript
You might like
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
2014/10/21 PHP
Zend Framework教程之视图组件Zend_View用法详解
2016/03/05 PHP
用javascript操作xml
2006/11/04 Javascript
javascript下给元素添加事件的方法与代码
2007/08/13 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
利用jqgrid实现上移下移单元格功能
2018/11/07 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
微信接入之获取用户头像的方法步骤
2019/09/23 Javascript
python三元运算符实现方法
2013/12/17 Python
在Python中marshal对象序列化的相关知识
2015/07/01 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
完美解决python中ndarray 默认用科学计数法显示的问题
2018/07/14 Python
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
通过实例了解Python str()和repr()的区别
2020/01/17 Python
执行Python程序时模块报错问题
2020/03/26 Python
Python logging模块进行封装实现原理解析
2020/08/07 Python
Python ellipsis 的用法详解
2020/11/20 Python
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
html5实现移动端适配完美写法
2017/11/16 HTML / CSS
美国最大的旗帜经销商:Carrot-Top
2018/02/26 全球购物
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
旅游管理专业个人求职信范文
2013/12/24 职场文书
体育专业个人求职信范文
2013/12/27 职场文书
艺术教育实施方案
2014/05/03 职场文书
植树造林的宣传标语
2014/06/23 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
保研导师推荐信
2015/03/25 职场文书
八月迷情观后感
2015/06/11 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python