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

给HTML页面指定元素添加属性,添加父元素的更多相关文章

  1. 关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位)

    关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位) 起因:在进行bootstrap的.navbar-brand内文字设置垂直居中时采用li ...

  2. HTML 文档流,设置元素浮动,导致父元素高度无法自适应的解决方法(高度欺骗)

    元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...

  3. 解决:子元素设置margin-top,父元素也受影响的问题

    <!doctype html><html> <head> <meta charset="UTF-8"> <title>子 ...

  4. CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  5. jQuery 对页面元素的搜索包括父元素、同辈元素、子元素的搜索

    1.父元素搜索 (1)parents([selector]) 方法 $("p").parents().css("border","1px solid ...

  6. 子元素应该margin-top影响父元素的解决办法

    在子元素设置margin-top,有时会带着父元素一起移动. 原因: Outer Div [margin: 0 auto] Inner Div [margin-top: 10px] 根据CSS2.1盒 ...

  7. 子元素设置margin-top,父元素也受影响

    这个问题困惑了非常久.尽管没有大碍早就摸出来怎么搞定它.但始终不明确原因出在哪里,假设仅仅是IE有问题我也不会太在意.可问题是全部上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出来怎么回事, ...

  8. html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡

    如果子元素和父元素都有点击事件,会出现点击事件冒泡的情况. 1.如何避免冒泡: html: <html> <head></head> <body> &l ...

  9. CSSmargin击穿问题(子元素margin-top会影响父元素)

    最近写一个H5页面的时候发现了这个被忽视的问题,一时没想到什么原因,搜了半天,记录一下,方便他人踩坑.唉,有些东西不用就忘. 一.问题描述 <div class="container& ...

  10. 子元素的margin-top影响父元素原因和解决办法

    这个问题会出现在所有浏览器当中,原因是css2.1盒子模型中规定, In this specification, the expression collapsing margins means tha ...

随机推荐

  1. 2019.03.15王苛震——myls

    /* 1.尝试实现ls命令的功能 加选项-l -a -i -h */ #include <stdio.h> #include <sys/types.h> #include &l ...

  2. 数据结构C语言版-队列

    #include <stdlib.h> #include <stdio.h> #include <iostream> using namespace std; ty ...

  3. mycat跟踪分析

    mycat版本1.6 192.168.5.66 从 192.168.5.67主 一个user表 验证主从 log4j2修改日志level为debug schema.xml配置 启动服务,打开日志tai ...

  4. 实现ueditor的自动上传word中的……

    UEditor的配置和使用(单独图片与文件上传) Word图片上传控件发布-Xproer.WordPaster ueditor 图片粘贴上传,实现图文粘贴,图片自动上传 打开工程: 文档的上传. 运行 ...

  5. nginx报错:./configure: error: C compiler cc is not found, gcc 是已经安装了的

    源码安装nginx报错,找不到gcc,但是实际上gcc是存在的,如下: # ./configure checking for OS + Linux -.el7.x86_64 x86_64 checki ...

  6. python_flask 基础巩固(自定义URL转换器)

    自定义URL转换器(在BaseConverter类外定义)from werkzeug.routing import BaseConverter定义类继承BaseConverter 实现类app.url ...

  7. Matlib

    >>> name1=input('请输入第一个名字;') 请输入第一个名字;陈汉彬 >>> name2=input('请输入第二个名字;') 请输入第二个名字;钟宇 ...

  8. 最近一个dish项目的建设思考

    系统通用能力的沉淀:a.核心模型的数据沉淀 b.通用服务能力的沉淀 ps1:以前重心主要放在了业务的抽象和通过设计模式来增加可复用的扩展性.局限在于,抽象的范围会被单个业务或者当前的业务所束缚,在更大 ...

  9. hdu 1086 You can Solve a Geometry Problem too [线段相交]

    题目:给出一些线段,判断有几个交点. 问题:如何判断两条线段是否相交? 向量叉乘(行列式计算):向量a(x1,y1),向量b(x2,y2): 首先我们要明白一个定理:向量a×向量b(×为向量叉乘),若 ...

  10. JVM垃圾收集器与内存分配策略(一)

    在前面的Java自动内存管理机制(上)和Java自动内存管理机制(下)中介绍了关于JVM的一些基础知识,包括运行时数据区域划分和一些简单的参数配置,而其中也谈到了GC,但是没有深入了解,所以这里开始简 ...