简单的JS控制button颜色随点击更改

先上效果图：

默认“今日”是选中状态，是行内样式：

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

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

  1. 点击其它颜色，“今日”颜色更换成灰色
  2. 再次点击“今日”，还原回默认状态颜色
  • 在除“今日”外的其它任一个日期中添加一个点击事件，可以实现【改变“今日”默认颜色状态】
  • 在“今日”的点击事件中添加【还原‘‘今日’’的默认状态颜色】
//昨日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，完成

时间： 2024-08-07 16:53:10

简单的JS控制button颜色随点击更改的相关文章

【Android】在某一时间段控制Button是否可点击

参考:http://blog.chinaunix.net/uid-9688646-id-1998393.html 好久没更新博客了,或许是因为现在的工作比较轻松.这种现象不乐观啊.今天朋友问我,“一个按钮,比如我想让他周一和周三和周六的20:30-21:00这个时间段能点击其余时间不能点击”.我若假思索,便给他说了思路,然后顺便给朋友实现了下.首先,需要实现一个判断当前为礼拜几的方法,以及获取当前时间的方法,我把这两个方法放进了一个工具类.具体代码如下: import java.text.Dat

js控制div颜色

<html> <head> </head> <style> #div1{width:400px;height:400px;background-color:red;} </style> <script> function blue(){ div1=document.getElementById('div1'); div1.style.backgroundColor='blue'; } function pink(){  div1=do

通过JS控制各种元素的点击事件的事件间隔

<script type="text/javascript"> document.write(sumdemo(1, 2)); var btn = document.getElementById('btn'); btn.onclick = function() { this.disabled = 'disabled'; setTimeout(function() { btn.disabled = ''; }, 1000);//1秒后才能点击 }; </script>

用js控制没有名字的表单 进行提交

在BS前台设计中,某些地方提交表单是非常方便的. 但是表单的也是有很多中形式的. 表单的创建形式: 1.用<form></form>进行创建 2.直接设置表单的属性创建一个没有名字的表单 1.对于有名字的表单,可以直接写js事件进行提交 //设置表单提交方式 $('#importMethod').form({ url: "/QuestionType/FuzzyQueryQuestionType", onSubmit: function () { //进行表单验证

通过Js用button实现简单计算

<!DOCTYPE html> <html> <body> <p>假设 y=6,计算 x=y+2,并显示结果.</p> <button onclick="myFunction()">点击这里</button> <p id="demo"></p>//这里是用js生成一个段落显示计算结果 <script> function myFunction() {

JS 控制CSS样式表

JS控制CSS样式,首先得确定一点,CSS与HTML页面的链接方式,因为CSS有3种与HTML页面结合的方式,不同的方式也会产生不同的结果. 下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... 1 <style type="text/css"> 2 .orig { 3 display: none; 4 } 5 </style> 你想要改变把他的display属性由none改为inline. 解决办法:

js控制TR的显示影藏

在很多现实的场景中,有的文本框我们希望在选择“是”的按钮之后才出现,这就需要js控制TR的隐藏和显示,(div的影藏显示类似) 以下是一段选择是的按钮就显示身高和体重的文本框的代码.注意:ready方法必须要引用jquery的库. 1.html Code <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <

JS控制css

<style> #div1 {position:absolute;left:20px;top:30px;width:20px;height:30px;background-color:red} .red{color: red} .blue{color: blue} </style> <script> var d = 100; function test() { var a = document.getElementById("div1"); a.st

JS控制伪元素的方法汇总

转载自:http://www.jb51.net/article/81984.htm 一. 缘由: 本文源于在OSC社区中,有人提问如何用jq获取伪元素.我第一想法是强大的CSS Query应该可以获取伪元素吧. 然而事实上,CSS Query并不能.即我们不能通过$(":before").$(dom).find(":before")或document.querySelector(":before")来获取:before伪元素. 为此,我不得不重新