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

时间:2023-12-04 12:46:32

给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,谢谢