当图像src不为空时更改css类

Question

I have two div and it consist of two different class,when the image source is empty it will have default value.But when the image source change i need to change class properties how to achieve this. Below is my code

    <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

If you don't know from where your image source will change or that code is beyond your control, then you can put a MutationObserver for attribute in image, and in the event if the source is empty / not empty , add your class accordingly

EDIT

since you edited your question, by changing the DOM structure, so if you want to change style in the image, then only css is enough with img[src=""] unlike the earlier case where you want to change the parent div of that image because css doesn't have parent selector so far, so the first part of the answer was addressing that question.