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属性，如果来源为{ {1}}，相应地添加您的课程

编辑

因为您通过更改DOM结构来编辑您的问题，所以如果您想要更改图像中的样式，那么只有empty / not empty的css就足够了，而不像之前需要更改父div的情况因为css到目前为止还没有父选择器，所以答案的第一部分是解决这个问题。

当image src不为空时更改css类

1 个答案: