8

我试图确定一个元素是否明确设置了背景。我想我可以检查一下是否.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

而 IE8 显示

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

（这里是测试用例）

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

如果不处理每个单独的案例，是否有更好的方法来检测这一点？

4

4 回答 4

3

临时元素方法

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

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

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

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

div { background: red; }

...您可以改用以下内容，但我怀疑它是否适用于较旧的浏览器：

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

背景

我花了一些时间来解决类似的问题 - 当设置为百分比时，尝试从元素中获取原始宽度值。这比我想象的要棘手得多，最后我使用了类似的临时元素解决方案。正如 Rene Koch 上面所做的那样，我还期望该getComputedStyle方法会起作用……真的很烦人，它没有。试图检测源 CSS 世界和运行时 CSS 世界之间的差异是一件困难的事情。

于 2012-11-07T22:17:01.917 回答
1

这应该有效：

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

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

演示

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

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

于 2012-11-07T22:19:40.103 回答
0

使用@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);
}

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

测试用例在这里。

于 2012-11-08T16:13:18.043 回答
0

这篇文章解释了如何： 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;
}
于 2012-11-07T22:08:49.233 回答