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将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;
}

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

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

}

改变div背景firefox vs chrome

2 个答案: