Question

我想在图像源为空时删除框阴影（src =＆＃34;＆＃34;）。我怎样才能通过javascript实现这一目标？我认为最好的方法是在源为空时删除类，但我不知道如何做到这一点。有谁知道吗？

＆＃13;

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

＆＃13;

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

＆＃13;

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>

当图像scr为空时删除框阴影

3 个答案: