当图像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没有父选择器，所以答案的第一部分是解决该问题。