2010-02-10 98 views
31

有沒有辦法檢查元素的父母,並找到第一個具有CSS背景設置,然後返回該背景值?jQuery:檢查元素是否具有CSS屬性

喜歡的東西:

var background = $('element').parents().has(css('background')); 

UPDATE: 這是我現在使用的代碼:

jQuery.fn.getBg = function(){ 
    var newBackground = this.parents().filter(function() { 
     return $(this).css('background-color').length > 0; 
    }).eq(0).css('background-color'); 
    $(this).css('background-color',newBackground); console.log("new background is: "+newBackground); 
}; 

回答

45

如果它沒有設置,取它會產生一個空字符串的第一個。因此 

var bg = ('element').parents().filter(function() { 
    return $(this).css('background').length > 0; 
}).eq(0) 

編輯

有研究表明,css('background')總是產生一個空字符串,或undefined,根據瀏覽器。 css('background-color')將正確返回手頭元素的顏色;但每個瀏覽器的值也不同,所以測試(IE中的transparent,Firefox/Chrome中的rgba(0,0,0,0),這兩者都是指定透明的精確方式)是很麻煩的。

jQuery.fn.getBg = function() { 
    return $(this).parents().filter(function() { 
     // only checking for IE and Firefox/Chrome. add values as cross-browser compatibility is required 
     var color = $(this).css('background-color'); 
     return color != 'transparent' && color != 'rgba(0, 0, 0, 0)'; 
    }).eq(0).css('background-color'); 
}; 
+0

輝煌的解決方案+1 – 2010-02-10 19:17:51

+0

函數(x)中'x'究竟做了什麼?是一個佔位符,還是它實際上被用於某種東西? – adamyonk 2010-02-10 19:29:29

+0

試試這個:if('')alert(「The empty string is true!」); - 你也可以使用!!將布爾值轉換爲「truthy」值。 – Pointy 2010-02-10 19:52:29

9

我相信這樣做的正確方法是檢查。長度屬性。

在你的情況,你會通過你所有的元素要循環,並檢查符合

.css('background').length != 0 
+0

@大衛的答案是更好的,至於使用布爾而不是長度,但必須+1這個...第一個答案哪個會工作,需要一些重點。 – sberry 2010-02-10 19:15:42

5
$('selector').parents().filter(function() { return !!$(this).css('background'); }); 
+3

終於很好用了!符號+1 – 2010-02-10 19:18:09

+0

您知道,Javascript中的空字符串是錯誤的。 – Pointy 2010-02-10 19:33:06

+0

@gaby哦我明白你的意思了Gaby;沒關係!並感謝您的投票! – Pointy 2010-02-10 19:53:58

2

我想嘗試這樣的事:

var background = 0; 
$('element').parents().each(function() { 
    if (!background && ((e = $(this).css('background')).length > 0)) background = e; 
}); 

如果這個確切如果從句的作品不知道,但每()應該做的伎倆。第一場比賽將填補背景變量,並在鏈條中穿越時忽略其他父母。

編輯:修改爲正確解析css('background'),可能會發出空字符串。此外,each()不通過元素,而是索引和元素,從而利用this代替並丟棄所有參數。

-6

你可以這樣做:

$('#test').parents().has(css('background')).filter(':first'); 

希望它可以幫助:)

+0

css不是jQuery上下文中的函數。 – Derrick 2010-08-12 11:50:43

+0

同意井架,最重要的是.has()函數將元素選擇器作爲其參數。 – JoseMarmolejos 2010-09-01 01:33:18

1

檢索元素的背景顏色或漸變

我碰到這個際,我想申請一個背景元素沒有一個(背景漸變或顏色)已經。

該函數返回的背景漸變顏色或背景的價值,如果它有一個,如果不返回false:

jQuery.fn.getBg = function() { 
    var color = $(this).css('background-color'); 
    var image = $(this).css('background-image'); 

    if (color != 'transparent' && color != 'rgba(0, 0, 0, 0)') { 
    return color; 
    } 
    if (image != 'none') { 
    return image; 
    } 
    return false; 
}; 

現在,如果你只是想測試一個元素是否有一個背景,你可以使用上面的函數做到這一點:

var curBack = $(this).getBg(); 
if (curBack) { /* Element has a background */ } 
else { /* Element doesn't have a background */ } 

希望這對於某些使用漸變的人來說有點足智多謀。