给HTML页面指定元素添加属性，添加父元素

给HTML页面指定元素添加属性，添加父元素

下面拿一个给富文本中所有的图片增加layer弹窗效果。

思路： 

1. 给富文本父元素设置属性。
2. 获取父元素里所有的img   此处用到querySelectorAll 函数
3. for 遍历标签修改需求
   

 

复习jQuery属性

wrap给指定元素增加父元素

 

JS属性

.src获取标签路径值

setAttribute给标签赋值

 

<script type="text/javascript">
        //给指定标签追加父元素
        $('.memorandummainlist img').wrap('<div  id="layer-photos-demo" class="layer-photos-demo" onclick="return onimg();"></div>');
        
        //获取页面里所有的指定标签
        let target = document.querySelectorAll('.memorandummainlist img');
        //遍历页面里所有获取到的指定标签并执行需求的事件
        for (var i = 0; i < target.length; i++) {
            //获取循环中标签的SRC值
            var img_src = target[i].src;
            //给页面里每个指定标签属性并赋值
            target[i].setAttribute('layer-src',img_src);
        }
        </script>
        <script type="text/javascript">
            //调用示例
        function onimg(){
            layer.photos({
              photos: '#layer-photos-demo',
              id:'timg',
              anim:0
            }); 
        }
    </script>

觉得有用了扣下1，谢谢

转载于:https://www.cnblogs.com/chenliuxiao/p/10194240.html