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 ，您必须检查transparent。

在下面的代码段中，div上添加了一个不透明的红色边框（灰色背景）。
并且在透明的边框上添加了蓝色边框...仅供您查看 ;）

＆＃13;

$(".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.");
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

最好以全页模式查看要在其他浏览器中对此进行测试，您可以使用this CodePen。

查找parent-backgroundcolor不透明

1 个答案: