按鈕背景顏色切換

我一直在嘗試切換按鈕的背景顏色屬性onclick，但顏色只改變一次，不會來回切換。以下是代碼。按鈕背景顏色切換

function btnColor(btn, color) { 
var property = document.getElementById(btn); 
    if (property.style.backgroundColor == "rgb(244,113,33)") { 
     property.style.backgroundColor=color; 
    } 
    else { 
     property.style.backgroundColor = "rgb(244,113,33)"; 
    } 
} 

<input type="button" id="btnHousing" value="Housing" onclick="toggleLayer('transparent1');btnColor('btnHousing','rgb(255,242,0)');" />

來源

2013-06-11 ayush

CONSOLE.LOG'property.style.backgroundColor'之前'if'，你會看到什麼樣的價值實際上是。 – Teemu

你是一個元素的background-color在瀏覽器不同的報道時遇到的問題，無論是RGB，十六進制或者HSL RGBA（帶有或不帶有空格）...

所以該按鈕可能永遠不會滿足if條件，這意味着它將總是轉到else。

考慮到這一點，我建議使用一個類名，以保持UN /切換狀態的軌跡：

function btnColor(btn, color) { 
var property = document.getElementById(btn); 
    if (property.className !== 'toggled') { 
     property.style.backgroundColor=color; 
     property.className = 'toggled' 
    } 
    else { 
     property.style.backgroundColor = "rgb(244,113,33)"; 
     property.className = ''; 
    } 
}

JS Fiddle demo。

當然，如果我們使用元素的class，我們還不如用CSS來風格元素：

function btnColor(btn) { 
var property = document.getElementById(btn); 
    if (property.className !== 'toggled') { 
     property.className = 'toggled' 
    } 
    else { 
     property.className = ''; 
    } 
}

隨着CSS：

#btnHousing { 
    background-color: rgb(255,242,0); 
} 

#btnHousing.toggled { 
    background-color: rgb(244,113,33); 
}

JS Fiddle demo 。

function btnColor(btn) { 
    var property = document.getElementById(btn); 
    property.className = 'toggled' == property.className ? '' : 'toggled'; 
}

JS Fiddle demo：

以前的JavaScript可以（使用相同的CSS）簡化。

來源

2013-06-11 17:23:55

你有什麼建議我使用？ – ayush

剛剛看到..非常感謝！ – ayush

沒問題！ =） –

if(document.getElementById(id).style.background !== 'rgb(0, 0, 0)')

來源

2013-06-11 17:23:00

試過這個..不行！ – ayush

爲什麼在任何情況下，元素的backgroundColor都是黑色的？ –

一個簡單的解決方案（JS，CSS和HTML的順序）。你在CSS中設置一個類，然後選擇按鈕（是的，JS可以在一行中完成）並切換類。

var button1 = document.querySelector("button"); 
 

 

 
button1.addEventListener("click", function() { 
 

 
    document.body.classList.toggle("colorred"); 
 

 
});

.colorred { 
 
    background-color: red; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <title>Change color to background</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> 
 

 

 
</head> 
 

 
<body> 
 
    <button>Click me!</button> 
 
    <script src="main.js"></script> 
 
</body> 
 

 
</html>

來源

2018-02-22 11:46:38 Alex

按鈕背景顏色切換

回答

相關問題