Question

在以下情况中：

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

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

如果我检查

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

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

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

我只是想知道这是不对的我在做什么？

Answer 1

虽然依赖于浏览器，但这并不意味着你需要与浏览器的不一致性进行斗争并试图猜测每个浏览器会返回的字符串（现在和将来）。现在，它在IE和Firefox中是“透明的”，在Webkit浏览器中是rgba（0,0,0,0），但这可能会改变。

您可以查找并测试此访问者的浏览器实际用于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的背景下的How do I detect the inherited background-color of an element using 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是白色的，只要我们只谈论身体。

如果您正在讨论其他节点，那么您应该尝试找出的是背景颜色属性是从直接规则获取还是inherited

Answer 4

$（selector [attribute]）返回与您选择的选择器匹配且具有列出的属性的选择器集。

使用它，您可以遍历您感兴趣的DOM元素，检查它们是否具有“background-color”属性。如果他们这样做，那么很好，如果没有，你可以将他们的背景颜色属性设置为你选择的默认属性。

希望这有用。

安迪

检查背景颜色是否未定义？

4 个答案: