jquery - 发现父背景颜色不透明

Question

我尝试找到背景颜色不透明的最近的父级。

第一个代码有效，它找到了父级，但颜色是透明的。

bg = (e.parentsUntil($(this).has().css("background-color"))).css("background-color");

所以我为此苦苦挣扎:

bg = (e.parentsUntil($(this).has().css("background-color") <> 'transparent' ).css("background-color");

有一个小问题，chrome 使用 rgba(0,0,0,0) 定义透明，但这应该可以在第一个障碍通过后使用 or 语句实现。

Answer 1

有趣的问题!
我刚刚找到了一种方法来做到这一点。

对于 Chrome 和 Opera，您必须检查计算值 rgba(0,0,0,0) 而不是 transparent .

对于 Firefox 和 Internet Explorer，您必须检查透明。

在下面的代码片段中，在不透明的 div 上添加了红色边框(灰色背景)。
并且在透明的部分添加了蓝色边框...仅供您查看。
;)

$(".test").click(function(e){
  
  var parents = $(e.target).parents("div");
  parents.each(function(i){
    console.log( "element #"+i);
    console.log( "Background: "+$(this).css('background') );
    console.log( "Background-color: "+$(this).css('background-color') );

    // Chrome & Opera
    if( $(this).css('background-color').indexOf('rgba(0, 0, 0, 0)') == 0
       // Firefox & Internet Explorer
       || $(this).css('background-color').indexOf('transparent') == 0 ){

      $(this).css({"border":"2px solid blue"});
      console.log("Setting border to blue.\n\n");
    }else{
      $(this).css({"border":"2px solid red"});
      console.log("Setting border to red.\n\n");
    }
  });
  console.log("Red border means NOT transparent.");
});

.one{
  background:grey;
  height:200px;
  padding:40px;
}
.two{
  background:transparent;
  height:200px;
  padding:40px;
}
.three{
  background:transparent;
  height:200px;
  padding:40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="one">
  <div class="two">
    <div class="three">
      <span class="test">Hello - click me!</span>
    </div>
  </div>
</div>

最好在全页模式下检查它。
要在其他浏览器中测试此功能，您可以使用 this CodePen .