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

}

问题是对于透明色，chrome 将背景色属性读取为 "rgba(0, 0, 0, 0)" 但 firefox 将其读取为 "transparent"。但是，他们都将颜色为“#ff9494”的背景颜色属性读取为 "rgba(0, 0, 0, 0)"

所以这显然是一个问题，如果我有 if (transparent) chrome 不起作用，如果我有 if (reba(0000)) firefox 不起作用。关于如何解决此问题的任何想法？

Answer 1

我会通过类(class)来解决这个问题。你可以有 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;
}

编辑:更改选择器以使用 OP 正在使用的 ID。