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

Question

这个问题已经在这里有了答案：

• 非空属性的CSS属性选择器 1回答

我想在图像源为空（src =“”）时删除矩形阴影。 如何使用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>