更改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'); 

}