检索元素背景颜色或渐变

Question

有没有办法检查父元素并找到第一个具有CSS背景设置的元素，然后返回该背景值？

类似的东西：

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

更新：这是我现在使用的代码：

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);
};

Answer 1

如果未设置，则获取它将产生空字符串。因此

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

修改

一些研究表明，css('background') 总是会产生一个空字符串，或undefined，具体取决于浏览器。 css('background-color')将正确返回手边元素的颜色;但是每个浏览器也有不同的值，所以测试（transparent在IE中，rgba(0,0,0,0)在firefox / chrome中是很麻烦的，例如，两者都是指定透明的准确方法。

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'); };

Answer 2

我认为正确的方法是检查.length属性。

在您的情况下，您需要遍历所有元素并检查第一个符合

的元素

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

Answer 3

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

Answer 4

我会尝试这样的事情：

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

不确定这个确切的if子句是否有效，但是each（）应该可以解决问题。第一个匹配将填充背景变量，并在遍历链中时忽略其余父项。

修改：修改后正确解析css('background')可能会发出空字符串。此外，each()不传递元素，而是传递索引和元素，因此使用this代替并丢弃所有参数。

Answer 5

检索元素背景颜色或渐变

当我尝试将背景应用于没有背景（背景渐变或颜色）的元素时，我遇到了这个。

此函数返回背景渐变或背景颜色的值（如果有），如果不是则返回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 */ }

希望这对于使用渐变的人来说有点资源。

Answer 6

您可以执行以下操作：

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

希望有所帮助：）

jQuery：检查元素是否具有CSS属性

6 个答案:

检索元素背景颜色或渐变