【问题标题】:Check if background-color is undefined?检查背景颜色是否未定义?
【发布时间】:2011-03-21 16:16:13
【问题描述】:

以下情况:

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

我将 html 元素的 backgroundColor 保存到一个变量中。 如果未设置 bgCol,如何查询?我页面上的各种元素甚至没有 bgColor,所以我得到了错误。

如果我检查

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

一切正常。我只是想知道这是否是正确的检查?不应该是!= "undefined"!= 0之类的东西

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

我只是想知道我正在做的是否正确?

【问题讨论】:

  • 这取决于浏览器。

标签: javascript jquery colors cross-browser


【解决方案1】:

这取决于浏览器——我会在主流浏览器中测试这个值,然后找出你应该测试的内容。或者,您可以查看网络以查看之前是否已讨论过此问题。

编辑: 我做了alert( $("<div />").css("background-color") ),它返回了""。所以我认为这是我的浏览器中的默认设置 - Chrome。

【讨论】:

  • 在我的 chrome 和 safari console.log( $('p').css('backgroundColor') ); 中说:rgba(0, 0, 0, 0) Firefox 和 IE 说:“透明”
  • @matt 是对的,"" 是 Chrome 中的一个怪癖,原因是 $('<div/>') 元素不在文档正文中,Chrome 通常返回 rgba(0, 0, 0, 0)。有关详细信息以及如何解决这些浏览器不一致的问题,请参阅下面的答案。
【解决方案2】:

虽然它确实依赖于浏览器,但这并不意味着需要解决浏览器的不一致问题并尝试事后猜测每个浏览器会返回的字符串(现在和将来)。目前,它在 IE 和 Firefox 中是“透明的”,在 Webkit 浏览器中是 rgba(0, 0, 0, 0),但这可能会改变。

您可以查找并测试访问者的浏览器实际使用的具有background:none; 的虚拟元素的background-color 的确切实际名称,而不是硬编码字符串和信任浏览器。

// 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 色域的架构的东西,或者屏幕颜色配置文件)这仍然有效。

以下是回答问题How do I detect the inherited background-color of an element using jQuery/JS? 上下文中的示例JSBIN


请注意,根据元素是否是文档正文的一部分,某些浏览器会与它们自身不一致。因此,请确保将同类与同类进行比较。

例如,在 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)' 

【讨论】:

    【解决方案3】:

    总是有背景颜色集。如果不设置,浏览器默认设置。我认为这是一个相当正确的假设,即默认 bg 是白色的,只要我们谈论的是身体。

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

    【讨论】:

      【解决方案4】:

      $(selector[attribute]) 返回与您选择的选择器匹配且已定义列出的属性的选择器集。

      使用它,您可以遍历您感兴趣的 DOM 元素,检查它们是否具有“背景颜色”属性。如果有,那很好,如果没有,您可以将其背景颜色属性设置为您选择的默认值。

      希望这有帮助。

      安迪

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2012-05-23
        • 1970-01-01
        • 2011-09-12
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2018-06-19
        • 1970-01-01
        相关资源
        最近更新 更多