检测元素是否指定了背景？

I'm trying to determine if an element has a background explicitly set. I figured I could just check to see if .css('background')* was set, however, it's inconsistent between browsers. For example, chrome shows an element without a background set as

我正在尝试确定元素是否有明确设置的背景。我想我可以检查是否设置了.css（'background'）*，但是，它在浏览器之间是不一致的。例如，chrome显示没有背景设置的元素

background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box
background-color: rgba(0, 0, 0, 0)
background-image: none

whereas IE8 shows

而IE8显示

background: undefined
background-color: transparent
background-image: none

(test case here)

（这里的测试用例）

*(shorthand properties of CSS aren't supported for getting rendered styles in jQuery)

*（在jQuery中获取渲染样式不支持CSS的简写属性）

Short of handling each separate case is there a better way to detect this?

没有处理每个单独的案例是否有更好的方法来检测这个？

4 个解决方案

#1

temporary element approach

It's not ideal, but you could create a temporary element when your js initiates, insert it somewhere hidden in the document (because if you don't you get empty styles for webkit browsers) and then read the default background style set for that element. This would give you your baseline values. Then when you compare against your real element, if they differ you know that the background has been set. Obviously the downside to this method is it can not detect if you specifically set the background to the baseline state.

这不是理想的，但你可以在js启动时创建一个临时元素，将其插入隐藏在文档中的某个位置（因为如果你没有为webkit浏览器获取空样式），然后读取该元素的默认背景样式集。这将为您提供基线值。然后，当您与真实元素进行比较时，如果它们不同，则您知道背景已设置。显然，这种方法的缺点是它无法检测您是否将背景专门设置为基线状态。

var baseline = $('<div />').hide().appendTo('body').css('background');

var isBackgroundSet = ( element.css('background') != baseline );

If you wanted to avoid possible global styles on elements, that would break the system i.e:

如果你想避免元素上可能的全局样式，那将破坏系统，即：

div { background: red; }

... you could use the following instead, but I doubt if it would work so well with older browsers:

...你可以使用以下代码，但我怀疑它是否适用于旧浏览器：

var baseline = $('<fake />').hide().appendTo('body').css('background');

background

I spent some time with a similar issue - attempting to get the original width value from an element when set to a percentage. Which was much trickier than I had assumed, in the end I used a similar temporary element solution. I also expected, as Rene Koch does above, that the getComputedStyle method would work... really annoyingly it doesn't. Trying to detect the difference between the source CSS world and the runtime CSS world is a difficult thing.

我花了一些时间处理类似的问题 - 尝试在设置为百分比时从元素获取原始宽度值。这比我想象的要复杂得多，最后我使用了类似的临时元素解决方案。正如Rene Koch所做的那样，我也期望getComputedStyle方法能够正常工作......真的很烦人，但事实并非如此。试图检测源CSS世界和运行时CSS世界之间的差异是一件困难的事情。

#2

This should work:

这应该工作：

function isBGDefined(ele){
    var img = $(ele).css('backgroundImage'),
        col = $(ele).css('backgroundColor');

    return img != 'none' || (col != 'rgba(0, 0, 0, 0)' && col != 'transparent');
};

DEMO

DEMO

I didn't bother to test against the background property because in the end, it will change the computed styles of either backgroundImage and/or backgroundColor.

我没有费心去测试背景属性，因为最后它会改变backgroundImage和/或backgroundColor的计算样式。

Here's the code run against your test case (with another added): http://jsfiddle.net/WG9MC/4/

这是针对您的测试用例运行的代码（添加了另一个）：http：//jsfiddle.net/WG9MC/4/

#3

this article explains how: http://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/

本文解释了如何：http：//robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/

function getStyle(oElm, strCssRule){
    var strValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle){
        strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
    }
    else if(oElm.currentStyle){
        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
            return p1.toUpperCase();
        });
        strValue = oElm.currentStyle[strCssRule];
    }
    return strValue;
}

#4

Using the approach suggested by @pebbl I wrote a small jQuery function, hasBack(), to determine if an element has its background set.

使用@pebbl建议的方法，我编写了一个小的jQuery函数hasBack（），以确定元素是否具有其背景集。

$.fn.hasBack = function()
{
    var me = $.fn.hasBack;
    if(!me.cache)
    {
        // get the background color and image transparent/none values
        // create a temporary element
        var $tmpElem = $('<div />').hide().appendTo('body');
        $.fn.hasBack.cache = {
            color: $tmpElem.css('background-color'),
            image: $tmpElem.css('background-image')
        };
        $tmpElem.remove();
    }
    var elem = this.eq(0);
    return !(elem.css('background-color') === me.cache.color && elem.css('background-image') === me.cache.image);
}

This was tested in Chrome v22, Firefox v15, Opera 12.1, IE9, IE9 set to browser modes 9 compat, 9, 8, 7 and quirks mode.

这在Chrome v22，Firefox v15，Opera 12.1，IE9，IE9中进行了测试，设置为浏览器模式9 compat，9,8,7和quirks模式。

Test case here.

测试案例在这里。