Question

基本上，我在页面上有一个可以插入多个不同位置的元素。它没有背景颜色设置，但根据其插入位置的背景颜色，我可能想对其进行一些更改。

我的问题是：如何获得元素的有效背景颜色，即使背景颜色可能是从父母继承的（可能一直到身体）。

这是一个简单的例子，我想找到.color-me的背景颜色

<div class="cont">
   <div class="color-me">what's my background-color?</div>
</div>

还有一个代码：http://codepen.io/evanhobbs/pen/FbAnL/

Answer 1

考虑到一些（非常重要的）警告，这是可能的。 zzzzBov在对该问题的评论中总结得很好：

......当您需要开始考虑背景图像，渐变，rgba值和不透明度时，复杂性就会出现。使用非透明背景颜色获取最近父级的颜色相对简单，它可能不是元素背后的实际颜色。

有了这些警告，基本上你必须得到元素的背景颜色，如果它是透明的，转到父元素，依此类推。

不同的浏览器有不同的＆＃34;透明＆＃34;的视图，这里有一个涵盖其中大部分的示例：Updated Pen

$(function() {
  var bc;
  var $elm = $(".color-me");
  while (isTransparent(bc = $elm.css("background-color"))) {
    if ($elm.is("body")) {
      console.log("Gave up");
      return;
    }
    $elm = $elm.parent();
  }
  console.log("Effective color: " + bc);

  function isTransparent(color) {
    switch ((color || "").replace(/\s+/g, '').toLowerCase()) {
      case "transparent":
      case "":
      case "rgba(0,0,0,0)":
        return true;
      default:
        return false;
    }
  }
});

我完全不确定所有浏览器都可以使用，特别是那些不会为计算颜色提供rgb（非rgba）值的浏览器。

Answer 2

我更喜欢jsfiddle，但这里是你更新的codepen .. http://codepen.io/anon/pen/nhDGC 添加匿名函数以便使用它只需调用$('.yourselector').getBg();

jQuery.fn.getBg = function() {
return $(this).parents().filter(function() {

    var color = $(this).css('background-color');

    if(color != 'transparent' && color != 'rgba(0, 0, 0, 0)' && color != undefined) 
    { return color; 
    }
}).css('background-color');
};

$(function() {
  //console.log($('.cont').css('background-color'));
   console.log($('.color-me').getBg())
   $('.color-me').append($('.color-me').getBg());

   console.log($('.color-me2').getBg())
   $('.color-me2').append($('.color-me2').getBg());
 });

过滤父母+会在找到背景颜色时返回。

Answer 3

这是解决这个问题的一种优雅方式（对不起，我更喜欢CoffeeScript）。它开始从自己搜索，但你总是可以使用$el.parents().each ->。

findClosestBackgroundColor = ($el) ->
    background = 'white'
    $.merge($el, $el.parents()).each ->
      bg = $(this).css('background-color')
      if color isnt 'transparent' and !/rgba/.test(color)
        background = bg
        return false
    background

DEMO：使用coffeescript.org将其编译为javascript，并在包含jQuery的任何页面的控制台中运行它。

如何使用javascript / jQuery获取透明元素的有效背景颜色

3 个答案: