如何用HTML5和CSS更改按鈕背景顏色3次

我正在創建一個內部用戶可以單獨點擊的按鈕表。我需要按鈕才能將背景從白色切換到綠色再切換到紅色，然後再切換到白色....用戶是內部用戶，我可以指定這隻適用於Chrome。我想堅持使用基本的HTML5/CSS3和Javascript，因爲它更具有程序性，我的團隊（我們不是網頁開發人員）更有可能維護它。如何用HTML5和CSS更改按鈕背景顏色3次

按鈕元素似乎不能像文本或其他元素一樣工作。我已經採取代碼來更改其他背景顏色，但當元素是按鈕時它不起作用。

我的2分基本阻塞的問題是：

你如何在onclick（）程序讀取當前的背景顏色，所以我的代碼可以計算下一個顏色？

如何更改Button元素的樣式或類，以便在退出onClick（）例程期間或退出onClick（）例程時更改背景顏色？

我已經看到，在定義這樣的CSS文件，3種不同顏色風格的例子：

.make-background-white { background-color: white} 
.make-background-green { background-color: green} 
.make-background-red { background-color: red}

而且我可以用這些當我最初畫的按鈕。但我不知道如何在onClick（）例程中「讀取」當前背景顏色，也不能更改顏色。

更多詳情

我從數據庫中讀取找到解決按距離排序商店所有的拉鍊碼。我創建了一個帶有郵編的按鈕表格作爲文本，其範圍可以從40-600個按鈕。背景顏色顯示未分配什麼郵政編碼（白色背景）和分配了哪些郵政編碼（綠色背景）。

有時用戶想要點擊幾個白色郵政編碼來表示他們想要將該代碼分配給商店。

我還希望用戶可以點擊一些幫助器按鈕來自動將郵政編碼分配給30或60或90英里半徑的商店。

我有一個很大的Javascript哈希/關聯數組，使用zip代碼作爲關鍵字，它用於創建按鈕，跟蹤距離，跟蹤哪些郵政編碼被分配或未分配等等。這很簡單。它動態地改變了將我拋棄的按鈕背景。

我後黑客，使一些工作三天管理由使用jQuery與回調是這樣的：

$(".btn").click(function() { 
    if ($(this).hasClass ('make-background-white') { 
     $(this).removeClass('make-background-white'); 
     $(this).addClass ('make-background-green'); 
    } else if ($(this).hasClass('make-background-green') { 
     // Remove green, add red 
    } else if() { 
     // Remove red, add white 
    } 

}

這似乎與新的背景和作品觸發按鈕重新抽籤將一個字符串存儲在「class」屬性中，以便以後可以讀取和操作。這是我更直接的Javascript的其餘部分的回調，其他使用「getElementById（）」的onClick（）例程似乎無法以相同的方式讀取或操作「class」屬性。

任何幫助做Javascript上面的上述將不勝感激。

來源

2012-06-01 Bob Mac

你能否詳細說明的問題是，究竟是什麼一點點？你寫的代碼會改變按鈕的顏色。我已經把一個小小的演示放在一起，通過點擊另一個按鈕來顯示您所寫的內容並更改按鈕的顏色。 http://jsfiddle.net/CWjWY/1/順便說一下，你的代碼在if語句結尾處缺少''''。 – sachleen

如果你的目標是在普通的JavaScript中實現一個背景顏色循環按鈕（在這種情況下不依賴類名），那麼下面是一個可能的方法，儘管它可能過於複雜：

function inArray(needle, haystack) { 
    if (!needle || !haystack) { 
     return false; 
    } 
    else { 
     var notFound = -1; 
     for (var i = 0, len = haystack.length; i < len; i++) { 
      if (haystack[i] == needle) { 
       return i; 
      } 
     } 
     return notFound; 
    } 
} 

function colorToggle(el, colors) { 
    if (!el) { 
     return false; 
    } 
    else { 
     var colors = colors || [ 
      'rgb(255, 0, 0)', 
      'rgb(0, 255, 0)', 
      'rgb(0, 0, 255)'], 
      wGCS = window.getComputedStyle, 
      curColor = wGCS(el, null).backgroundColor; 
     var pos = inArray(curColor, colors); 
     if (pos > -1 && pos < (colors.length - 1)) { 
      el.style.backgroundColor = colors[inArray(curColor, colors) + 1]; 
     } 
     else if (pos > -1 && pos == (colors.length - 1)) { 
      el.style.backgroundColor = colors[0]; 
     } 
    } 
} 

var buttons = document.querySelectorAll('button.colorToggle'); 

for (var i = 0, len = buttons.length; i < len; i++) { 
    buttons[i].style.backgroundColor = 'rgb(255, 255, 255)'; 
    buttons[i].onclick = function() { 
     colorToggle(this, ['rgb(255, 255, 255)','rgb(0, 255, 0)','rgb(255, 0, 0)']); 
    }; 
}

JS Fiddle demo。

由於您確信只有在Chrome中運行，我只在Chromium 18中進行過測試（因爲我沒有Windows或Mac爲了明確測試Google Chrome），而且這看起來確實如此如你所需。

參考文獻：

window.getComputedStyle。

來源

2012-06-01 19:44:36

非常好的例子。謝謝。我將採取一些你的想法（比如檢查「el」是否爲空）。 –

很高興已經有（一些）幫助！ =） –

您真的需要在更改之前獲取CSS屬性嗎？沒有這個先決條件的一個例子：

<html> 
<head> 
<script type="text/javascript"> 
var bg_colors = ['red', 'blue', 'green'] 

function change_bg_color() 
{ 
    bg_color = bg_colors.shift(); 
    bg_colors.push(bg_color); 
    document.getElementById("demo").style.backgroundColor=bg_color; 
} 
</script> 
</head> 
<body> 

<h1>My First Web Page</h1> 
<p id="demo">This is a paragraph.</p> 

<button type="button" onclick="change_bg_color()">change background-color</button> 

</body> 
</html>

來源

2012-06-01 19:51:25 Vidul

我認爲（超過3天的黑客）設置「.style.bacgroundColor =」不適用於按鈕。但我可能一直在試圖做「button.backgroundColor」而不是「button.style.backgroundColor」。感謝您的建議。 –

如果你只在每按鈕，你可以閱讀的時間需要一個類名/寫上點擊類名。

$(".btn").click(function() { 
    var c=this.className; 
    if(c=='make-background-white' || c=='')this.className='make-background-red'; 
    else if(c=='make-background-red')this.className='make-background-green'; 
    else this.className='make-background-white'; 
}

這是假設你開始使用白色背景，要麼是因爲所有的按鈕啓動了這種方式（按鈕，。使背景白色{背景顏色：白色;顏色：黑色}），或你自己的設置class屬性。

來源

2012-06-01 20:42:07 kennebec

看起來上面的代碼會在第一次點擊時在類名的開頭刪除「btn」。如果我在作業中的字符串是這樣的：「btn make-background-green」 - 那麼稍後的點擊將起作用。但它仍然在使用Jquery回調函數，它會破壞創建我自己的「onClick = myFunction（）」的能力。如果我使用jQuery重寫所有內容，那就沒問題了。（但我只是在昨天才開始使用jQuery）。 –

SUCCESS。我終於找到了如何使用Javascript訪問className屬性。

並以某種方式 - 設置className似乎會觸發按鈕的重新繪製。

下面是我的功能我用的onClick = 「zipClick（ 'this_button'， 'this_textarea'）」

謝謝所有偉大的響應調用。

// This function does 2 things: 
    // Changes the background color of the button 
    // Calls a REST service 
    function zipClick (aButtonId, aTextAreaId) { 

     var lButton = document.getElementById(aButtonId); 
     var lClassName = lButton.className; 

     // lClassName should be something like: "btn make-background-yellow" 
     //alert ("Button Class Start = " + lClassName); 

     if (lClassName.indexOf('green') > -1) { 
      lButton.className = 'btn make-background-yellow'; 
     } else if (lClassName.indexOf('white') > -1) { 
      lButton.className = 'btn make-background-green'; 
     } else if (lClassName.indexOf('yellow') > -1) { 
      lButton.className = 'btn make-background-white'; 
     } else { 
      // Should never get here but fix the class name for the next click 
      lButton.className = 'btn make-background-white'; 
     } 

     alert ("old class: " + lClassName + "\nnew class: " + lButton.className); 

    } // zipClick

來源

2012-06-01 22:03:58

您可以通過jQuery的setTimeout的function.By實現這一目標保持顏色的潛在價值，你可以切換風格

<script> 
setTimeout(function() { 
//code to change style to button 
}, 10000); 
</script>

來源

2013-06-26 12:15:51

如何用HTML5和CSS更改按鈕背景顏色3次

回答

相關問題