如何通过标签里面的class名发生变化来控制子节点

代码如下

 <div class="cbp-item design">
                        <div class="u-block-hover g-parent">
                            <video id="my_video_3" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9" controls preload="auto" poster="~/assets/img-temp/500x335/img1.jpg" data-setup="{}">
                                <source src="~/Content/Video/software.mp4" type="video/mp4">
                            </video>
                        </div>
                        <div class="text-center g-pa-25 mb-1">
                            <h3 class="h5 g-color-black mb-1">123123</h3>
                            <p class="mb-0">123123</p>
                        </div>
                    </div>

cpb-item这个class会变化为cpb-item-off 我如何通过在变化之后让它下面对应的video标签的视频停止播放
里面有多个这样的标签，我想在每一个cpb-item-off下面的video都是停止播放的状态

更换样式的代码最后增加下面2局代码执行video暂停方法

    var videos = document.querySelectorAll('.cpb-item-off video');
    for (video of videos)video.pause()

如果无法修改事件，可以用MutationObserver来监控dom对象的属性修改，具体参考

有其他问题可以继续交流~

setInterval 监听判断 有没有对应节点 有节点 停止视频
然后清除 setInterval