[英]Check if background-color is undefined?
在以下情況下:
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)"
我只是想知道這是對的嗎?
盡管它確實取決於瀏覽器,但這並不意味着您需要與瀏覽器不一致作斗爭,並嘗試猜測每個瀏覽器將返回的字符串(現在和將來 )。 目前,它在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)'
這取決於瀏覽器-我會在主流瀏覽器中測試該值,然后找出您應該測試的內容。 或者,您可以在網上查看該問題是否已經討論過。
編輯:我做了alert( $("<div />").css("background-color") )
,並且返回了""
。 因此,我認為這是我的瀏覽器中的默認設置-Chrome。
總是有背景色設置。 如果未設置,則瀏覽器默認設置。 我認為默認bg為白色是正確的假設,只要我們談論的只是body。
萬一您在談論其他節點,您應該嘗試找出的是background-color屬性是從直接規則中獲取的還是它是inherited
$(selector [attribute])返回與您選擇的選擇器相匹配的選擇器集合,並定義了列出的屬性。
使用此功能,您可以遍歷感興趣的DOM元素,檢查它們是否具有“ background-color”屬性。 如果可以,則很好,如果不能,則可以將其background-color屬性設置為您選擇的默認值。
希望這會有所幫助。
安迪
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.