當圖像src不為空時更改css類

Question

我有兩個div，它包含兩個不同的類，當圖像源為空時，它將具有默認值。但是當圖像源更改時，我需要更改類屬性才能實現此目的。 下面是我的代碼

    <div data-role="view" data-title="Add Photo">
        <ul data-role="actionsheet" id="ImagePopUp" data-open="onOpen" data-popup='{"direction": "left"}'>
            <li class="km-actionsheet-title"></li>
            <li><a data-action="ImagefromGallery">From Gallery</a></li>
            <li><a data-action="ImagefromCamera">From Camera </a></li>

        </ul>
    </div>

  <a id="OpenView" data-rel="actionsheet" data-role="button" href="#ImagePopUp" style="text-decoration: none;border:none;">
                            <img src="images/icon-photo.png" class="icon" />
                        </a>

<div class="divimage">
   <image src="" id="userprofile">
</div>

<div class="divtext">
</div>

的CSS

.divimage{ 
 top:2em;
 height:30px;
 width:100%;
  height:100%  
 }

.divtext{
height:30px;
 width:100%;
height:100%  
 margin-left:5px;
 margin-top :2px
  }

   //replace this class with divimage
   .onchangeImageSrc{ 
     some value
    }

     //replace this class with divtext
    .divNewtext{ 
    some value
  }

Answer 1

如果您不知道圖像源將從何處更改或該代碼超出您的控制范圍，則可以在圖像中放置MutationObserver作為屬性，如果源為empty / not empty ，則相應地添加類

編輯

由於您是通過更改DOM結構來編輯問題的，因此，如果您想更改圖像的樣式，則與img[src=""] ，只有css就足夠了，而之前的情況是您想要更改其父div圖像，因為到目前為止CSS沒有父選擇器，所以答案的第一部分是解決該問題。