イメージscrが空のときにボックスシャドウを削除する

Question

イメージソースが空の場合（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あなたが唯一の空でないsrc属性を持つものに影響を与えるために:notプロパティを使用することができます.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

。人々の

.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

回答OKですが、私はそうこれを試してみてくださいあなたは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>