簡單的JS控制button顏色隨點(diǎn)擊更改的實(shí)現(xiàn)方法
更新時間：2017年04月17日 08:57:56 投稿：jingxian
下面小編就為大家?guī)硪黄唵蔚腏S控制button顏色隨點(diǎn)擊更改的實(shí)現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
先上效果圖：
默認(rèn)“今日”是選中狀態(tài)，是行內(nèi)樣式：
<button type="button" id="today" class="btn-link" onclick="todayDate()" style="color: #0062CC;">今日</button>
上面的日期都是點(diǎn)擊才會切換顏色：
點(diǎn)擊其它顏色，“今日”顏色更換成灰色
再次點(diǎn)擊“今日”，還原回默認(rèn)狀態(tài)顏色
在除“今日”外的其它任一個日期中添加一個點(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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript?Generator異步過度的實(shí)現(xiàn)詳解
生成器Generator是JavaScript?ES6引入的特性，它讓我們可以分段執(zhí)行一個函數(shù)。但是在談?wù)撋善鳎℅enerator）之前，我們要先了解迭代器Iterator2022-08-08
本篇文章是對使用JS清空File控件的路徑值的方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-07-07
使兩個iframe的高度與內(nèi)容自適應(yīng),且相等
使兩個iframe的高度與內(nèi)容自適應(yīng),且相等...2006-11-11
JavaScript動態(tài)修改網(wǎng)頁元素內(nèi)容的方法
這篇文章主要介紹了JavaScript動態(tài)修改網(wǎng)頁元素內(nèi)容的方法,實(shí)例分析了javascript操作html元素的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
非IE瀏覽器“userdata”的解決方案2009-06-06
原生js獲取iframe中dom元素--父子頁面相互獲取對方dom元素的方法
下面小編就為大家?guī)硪黄鷍s獲取iframe中dom元素--父子頁面相互獲取對方dom元素的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
精通Javascript系列之?dāng)?shù)據(jù)類型 字符串
下面先講一下字符串String字符串由零個或者多個字符構(gòu)成。字符可以包括字母、數(shù)字、標(biāo)點(diǎn)符號和空格。2011-06-06
JS中如何實(shí)現(xiàn)Laravel的route函數(shù)詳解
這篇文章主要給大家介紹了JS中是如何實(shí)現(xiàn)Laravel的route函數(shù)，文中通過示例代碼介紹的很詳細(xì)，相信對大家具有一定的參考價值，有需要的朋友們下面來一起看看吧。2017-02-02
這篇文章主要介紹了javascript仿百度輸入框提示自動下拉補(bǔ)全的相關(guān)資料,需要的朋友可以參考下2016-01-01
深入理解JS中attribute和property的區(qū)別
property 和 attribute非常容易混淆，但實(shí)際上，二者是不同的東西，屬于不同的范疇，本文就詳細(xì)的介紹一下JS中attribute和property的區(qū)別 ，感興趣的可以了解一下2022-02-02