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

Question

我正在尝试确定元素是否有明确设置的背景.我想我可以检查一下是否.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的简写属性)

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

Answer 1

临时要素法

这并不理想，但您可以在 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 世界之间的差异是一件困难的事情。