Question

如果'element'具有透明背景

$('element').css('background-color')

在某些浏览器中返回'transparent'，在其他浏览器中返回'rgba（0,0,0,0）'。

我希望jQuery能够以跨浏览器的方式告诉我们元素是否具有透明背景。

我错过了什么吗？

由于

Answer 1

rgba（0,0,0,0）与透明相同。最后一位是颜色填充的方式，0 =透明。

function background_color(element) {
    if (element.css('background-color') === 'rgba(0, 0, 0, 0)'){
        return 'transparent';
    }
    return element.css('background-color');
}

background_color($('element')) // will do the trick

Answer 2

我不确定这对您是否有用，但您可以添加custom cssHook并在那里进行处理。您也可以定义它，以便修改.css(background-color)的返回值，但我没有足够的cssHooks经验知道如何不能使其无限递归：/

$.cssHooks["nBackgroundColor"] = {//proxy to .css("background-color") called with .css("n-background-color")
    get: function(elem) {
        var back = $(elem).css("background-color");
        return back === "rgba(0, 0, 0, 0)" ? "transparent" : back;
    }, 
    set: function(elem, val){ return $(elem).css('background-color', val); }
};

$($("div")[10]).css('n-background-color');//=> transparent

如何在jQuery中判断元素的背景是否透明？

2 个答案: