简单的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 相关文章推荐
javascript 短路法代码精简
Aug 20 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
Dec 28 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
Javascript中浏览器窗口的基本操作总结
Aug 18 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
基于JS实现移动端左滑删除功能
Jul 28 Javascript
JS去掉字符串中所有的逗号
Oct 18 Javascript
Angular5给组件本身的标签添加样式class的方法
Apr 07 Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
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
Protoss兵种介绍
2020/03/14 星际争霸
php桌面中心(一) 创建数据库
2007/03/11 PHP
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
php实现按照权重随机排序数据的方法
2015/01/09 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
用js 让图片在 div或dl里 居中,底部对齐
2008/01/21 Javascript
javascript 星级评分效果(手写)
2012/12/24 Javascript
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
js中substring和substr的定义和用法
2014/05/05 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
input标签内容改变的触发事件介绍
2014/06/18 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
JS版元素周期表实现方法
2015/08/05 Javascript
jQuery实现连续动画效果实例分析
2015/10/09 Javascript
Javascript函数式编程语言
2015/10/11 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
AngularJS基础 ng-mousemove 指令简单示例
2016/08/02 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
详解JavaScript数组过滤相同元素的5种方法
2017/05/23 Javascript
JS点击缩略图整屏居中放大图片效果
2017/07/04 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
微信小程序登录session的使用
2019/03/17 Javascript
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
python 爬取微信文章
2016/01/30 Python
python 简单的绘图工具turtle使用详解
2017/06/21 Python
Python 通配符删除文件的实例
2018/04/24 Python
python 输出所有大小写字母的方法
2019/01/02 Python
tensorflow ckpt模型和pb模型获取节点名称,及ckpt转pb模型实例
2020/01/21 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
公司道歉信范文
2014/01/09 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
学会感恩主题班会
2015/08/12 职场文书
MySQL 5.7常见数据类型
2021/07/15 MySQL
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL