检查background-color是否未定义？

Question

在以下情况下：

var bgCol = $(selector).css('backgroundColor');

我将html元素的backgroundColor保存到变量中。 如何查询是否未设置bgCol？ 页面上的各种元素甚至都没有bgColor，因此出现错误。

如果我检查

if ( bgCol != "rgba(0, 0, 0, 0)" )

一切正常。 我只是想知道这是否是正确的检查？ 不应该是像!= "undefined"或!= 0

我正在测试"rgba(0, 0, 0, 0)" 0，0，0，0） "rgba(0, 0, 0, 0)"因为我的控制台告诉我...如果我console.log（bgCol）并且未设置bgcolor，我的控制台会说： "rgba(0, 0, 0, 0)"

我只是想知道这是对的吗？

Answer 1

尽管它确实取决于浏览器，但这并不意味着您需要与浏览器不一致作斗争，并尝试猜测每个浏览器将返回的字符串（现在和将来 ）。 目前，它在IE和Firefox中是“透明的”，在Webkit浏览器中是rgba（0，0，0，0），但这可能会改变。

您无需查找字符串，也不用信任浏览器来满足您的期望，而是可以查找并测试此访问者的浏览器实际使用的确切真实名称作为具有background:none;的虚拟元素的background-color background:none; 。

// Get this browser's take on no fill. Append, else Chrome returns 'initial'  
var $temp = $('<div style="background:none;display:none;"/>').appendTo('body');
var transparent = $temp.css('backgroundColor');
$temp.remove();

// Use it
if ( $elem.css('backgroundColor') != transparent ) {
  // It's set
} else {
  // It's blank
}

即使某些疯狂的未来浏览器选择使用名称“ Clive”作为未设置任何元素的background-color （或更现实的是，也许基于某种模式的东西也可以更好地与整个sRGB色域或屏幕颜色配置文件配合使用） ），仍然可以使用。

这是一个在回答问题的上下文中的示例JSBIN ， 如何使用jQuery / JS检测元素的继承背景色？

---

请注意，尽管某些浏览器与它们自身不一致，这取决于该元素是否是文档主体的一部分。 因此，请确保您比较喜欢。

例如，在Chrome中：

$('<div/>').css('backgroundColor'); 
// returns '' empty string 

$('<div style="background:none;"/>').css('backgroundColor'); 
// returns 'initial'

$('<div style="background:none;"/>').appendTo('body').css('backgroundColor'); 
// returns 'rgba(0, 0, 0, 0)' 

Answer 2

这取决于浏览器-我会在主流浏览器中测试该值，然后找出您应该测试的内容。 或者，您可以在网上查看该问题是否已经讨论过。

编辑：我做了alert( $("<div />").css("background-color") ) ，并且返回了"" 。 因此，我认为这是我的浏览器中的默认设置-Chrome。

Answer 3

总是有背景色设置。 如果未设置，则浏览器默认设置。 我认为默认bg为白色是正确的假设，只要我们谈论的只是body。

万一您在谈论其他节点，您应该尝试找出的是background-color属性是从直接规则中获取的还是它是inherited

Answer 4

$（selector [attribute]）返回与您选择的选择器相匹配的选择器集合，并定义了列出的属性。

使用此功能，您可以遍历感兴趣的DOM元素，检查它们是否具有“ background-color”属性。 如果可以，则很好，如果不能，则可以将其background-color属性设置为您选择的默认值。

希望这会有所帮助。

安迪