删除图像scr为空时的阴影

-1

我想在图像源为空时删除阴影（src =“”）。我怎样才能达到这与JavaScript？我认为最好的办法是在源代码空白时删除类，但我不知道如何去做。有人知道吗？删除图像scr为空时的阴影

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

来源

2017-05-25 ubuntujavy

使用属性选择器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>

来源

2017-05-25 15:02:57 XYZ

可以使用: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>

来源

2017-05-25 15:03:05 Styphon

答案是确定，但我看到你想要做这与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>

来源

2017-05-25 15:08:34 SilverSurfer

你可以这样做就更简单了， '$（'。property [src =“”]'）。css（{“ - webkit-box-shadow”：“none”，“-moz-box-shadow”：“none”，“box-shadow”： “none”}）;' – Styphon

好主意，编辑。 – SilverSurfer

删除图像scr为空时的阴影

回答

相关问题