更改div背景firefox vs chrome

Question

我在我的頁面上有一個div，我想通過單擊它來更改其背景。背景可以是「透明的」，無顏色，或紅/粉紅色。

我有檢查當前背景顏色並改變它基於該JavaScript函數：

if (buttonBackground == "transparent") { 
       //"rgba(0, 0, 0, 0)") { 
$('#delete_button_container_' + buttonNumber).css('background-color', '#ff9494'); 

} else if (buttonBackground == "rgb(255, 148, 148)") { 

$('#delete_button_container_' + buttonNumber).css('background', 'none'); 

} 

的問題是，對於一個透明的顏色，鉻讀取background-color屬性爲"rgba(0, 0, 0, 0)"但Firefox將其讀作"transparent"。然而，他們都閱讀背景顏色屬性與顏色'＃ff9494'爲"rgba(0, 0, 0, 0)"

所以這顯然是一個問題，如果我有if（透明）chrome不起作用，如果我有if （reba（0000））firefox不起作用。有想法該怎麼解決這個嗎？

Answer 1

我會用一個類來解決這個問題。您可以讓delete_button_container的默認狀態爲透明或顏色，這並不重要，但可以添加一個覆蓋該默認值的類來設置顏色。

HTML：

<div class="deleteButtonContainer transBackground"></div>

JS：

if($('#delete_button_container_' + buttonNumber).hasClass('transBackground')){ 
$(this).removeClass('transBackground'); 
} else { 
$(this).addClass('transBackground'); 
} 

CSS：

.deleteButtonContainer{ 
    background-color: rgb(255, 148, 148); 
} 

.deleteButtonContainer.transBackground{ 
    background-color: none; 
} 

編輯：改變了選擇器的ID OP用使用。

Answer 2

感謝意見，我做了以下內容和它的工作：

var transparent = false; 
if (buttonBackground == "transparent" || buttonBackground == "rgba(0, 0, 0, 0)") { 
       transparent = true; 
} 

if (transparent) { 
       //"rgba(0, 0, 0, 0)") { 
$('#delete_button_container_' + buttonNumber).css('background-color', '#ff9494'); 

} else if (buttonBackground == "rgb(255, 148, 148)") { 

$('#delete_button_container_' + buttonNumber).css('background', 'none'); 

}