簡單的JS控制button顏色隨點(diǎn)擊更改的實(shí)現(xiàn)方法

更新時(shí)間：2017年04月17日 08:57:56 投稿：jingxian

下面小編就為大家?guī)硪黄唵蔚腏S控制button顏色隨點(diǎn)擊更改的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

先上效果圖：

默認(rèn)“今日”是選中狀態(tài)，是行內(nèi)樣式：

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

上面的日期都是點(diǎn)擊才會(huì)切換顏色：

點(diǎn)擊其它顏色，“今日”顏色更換成灰色

再次點(diǎn)擊“今日”，還原回默認(rèn)狀態(tài)顏色

在除“今日”外的其它任一個(gè)日期中添加一個(gè)點(diǎn)擊事件，可以實(shí)現(xiàn)【改變“今日”默認(rèn)顏色狀態(tài)】

在“今日”的點(diǎn)擊事件中添加【還原‘‘今日''的默認(rèn)狀態(tài)顏色】

//昨日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顏色隨點(diǎn)擊更改的實(shí)現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript?Generator異步過度的實(shí)現(xiàn)詳解
生成器Generator是JavaScript?ES6引入的特性，它讓我們可以分段執(zhí)行一個(gè)函數(shù)。但是在談?wù)撋善鳎℅enerator）之前，我們要先了解迭代器Iterator
2022-08-08
解析使用JS 清空File控件的路徑值
本篇文章是對(duì)使用JS清空File控件的路徑值的方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下
2013-07-07
使兩個(gè)iframe的高度與內(nèi)容自適應(yīng),且相等
使兩個(gè)iframe的高度與內(nèi)容自適應(yīng),且相等...
2006-11-11
JavaScript動(dòng)態(tài)修改網(wǎng)頁元素內(nèi)容的方法
這篇文章主要介紹了JavaScript動(dòng)態(tài)修改網(wǎng)頁元素內(nèi)容的方法,實(shí)例分析了javascript操作html元素的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
javascript globalStorage類代碼
非IE瀏覽器“userdata”的解決方案
2009-06-06
原生js獲取iframe中dom元素--父子頁面相互獲取對(duì)方dom元素的方法
下面小編就為大家?guī)硪黄鷍s獲取iframe中dom元素--父子頁面相互獲取對(duì)方dom元素的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-08-08
精通Javascript系列之?dāng)?shù)據(jù)類型字符串
下面先講一下字符串String字符串由零個(gè)或者多個(gè)字符構(gòu)成。字符可以包括字母、數(shù)字、標(biāo)點(diǎn)符號(hào)和空格。
2011-06-06
JS中如何實(shí)現(xiàn)Laravel的route函數(shù)詳解
這篇文章主要給大家介紹了JS中是如何實(shí)現(xiàn)Laravel的route函數(shù)，文中通過示例代碼介紹的很詳細(xì)，相信對(duì)大家具有一定的參考價(jià)值，有需要的朋友們下面來一起看看吧。
2017-02-02
javascript仿百度輸入框提示自動(dòng)下拉補(bǔ)全
這篇文章主要介紹了javascript仿百度輸入框提示自動(dòng)下拉補(bǔ)全的相關(guān)資料,需要的朋友可以參考下
2016-01-01
深入理解JS中attribute和property的區(qū)別
property 和 attribute非常容易混淆，但實(shí)際上，二者是不同的東西，屬于不同的范疇，本文就詳細(xì)的介紹一下JS中attribute和property的區(qū)別，感興趣的可以了解一下
2022-02-02