Change the css class when image src is not empty

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
  }

I am using corodva capture plugin,in that when i select the pitcure from gallery the id userprofile image tag is set — kitty sarvaj
– kitty sarvaj, Commented Jul 16, 2017 at 15:36
If you just want to change the style, instead of adding a class to it, you can use the selector img[src=""] { /* some style */ } — Christian Valentin
– Christian Valentin, Commented Jul 16, 2017 at 15:56
@ChristianValentin yeah, I also agree with you. actually OP changed the question (by edit) now, earlier the question was wanting change the parent div class according to src value of image — Koushik Chatterjee
– Koushik Chatterjee, Commented Jul 16, 2017 at 16:16

Koushik Chatterjee · Accepted Answer · 2017-07-16 17:01:54Z

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.

edited Jul 16, 2017 at 17:01

answered Jul 16, 2017 at 15:33

Koushik Chatterjee

4,1933 gold badges20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change the css class when image src is not empty

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related