当图像 src 为空时删除框阴影 [重复]

Question

我想在图像源为空 (src="") 时移除 box-shadow。我怎样才能用javascript实现这一点？我认为最好的方法是在源为空白时删除课程，但我不知道该怎么做。有人知道吗？

    .property {
      margin-top: 20px;
      margin-left: auto;
      margin-right: auto;
      width: 290px;
      height: 200px;
      background-size: 100% 100%;
      border-radius: 4px;
      text-indent: 100vw; /*to remove border when image is empty*/
      -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
      -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
      box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
    }

<div class="col no-gutters">
      <img class="property" src="../accounts/report/Office.jpg">
      <div class="property-label">
        <h5>The Office</h5>
      </div>
    </div>
    <div class="col no-gutters">
      <img class="property" src="">
      <div class="property-label">
        <h5>The Warehouse</h5>
      </div>
    </div>

 

Answer 1

使用属性选择器 css .property[src=""]

.property {
      margin-top: 20px;
      margin-left: auto;
      margin-right: auto;
      width: 290px;
      height: 200px;
      background-size: 100% 100%;
      border-radius: 4px;
      text-indent: 100vw; /*to remove border when image is empty*/
      -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
      -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
      box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
    }
    .property[src=""] { 
       -webkit-box-shadow: none;
       -moz-box-shadow:none;
        box-shadow: none;
    }

<div class="col no-gutters">
      <img class="property" src="">
      <div class="property-label">
        <h5>The Office</h5>
      </div>
    </div>
    <div class="col no-gutters">
      <img class="property" src="">
      <div class="property-label">
        <h5>The Warehouse</h5>
      </div>
    </div>

Answer 2

您可以使用:not 属性来仅影响具有非空 src 属性的那些。

.property {
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 290px;
  height: 200px;
  background-size: 100% 100%;
  border-radius: 4px;
  text-indent: 100vw;
}
.property:not([src=""]) {
  -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
}

<div class="col no-gutters">
  <img class="property" src="">
  <div class="property-label">
    <h5>The Office</h5>
  </div>
</div>
<div class="col no-gutters">
  <img class="property" src="">
  <div class="property-label">
    <h5>The Warehouse</h5>
  </div>
</div>

Answer 3

人们的回答是好的，但我看到你想用 jquery 做这个，所以试试这个：

$('.property[src=""]').css({
        "-webkit-box-shadow": "none", 
        "-moz-box-shadow": "none", 
        "box-shadow": "none"
})

.property {
      margin-top: 20px;
      margin-left: auto;
      margin-right: auto;
      width: 290px;
      height: 200px;
      background-size: 100% 100%;
      border-radius: 4px;
      text-indent: 100vw; /*to remove border when image is empty*/
      -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
      -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
      box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col no-gutters">
      <img class="property" src="">
      <div class="property-label">
        <h5>The Office</h5>
      </div>
    </div>
    <div class="col no-gutters">
      <img class="property" src="">
      <div class="property-label">
        <h5>The Warehouse</h5>
      </div>
    </div>