给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. Notes : <Hands-on ML with Sklearn & TF> Chapter 6

    .caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px so ...

  2. Machine learning | 机器学习中的范数正则化

    目录 1. \(l_0\)范数和\(l_1\)范数 2. \(l_2\)范数 3. 核范数(nuclear norm) 参考文献 使用正则化有两大目标: 抑制过拟合: 将先验知识融入学习过程,比如稀疏 ...

  3. [swarthmore cs75] Compiler 5 – Egg-eater

    课程回顾 Swarthmore学院16年开的编译系统课,总共10次大作业.本随笔记录了相关的课堂笔记以及第7次大作业. 抽象语法: 存储方式: 栈中的数据如果最后三位(tag bits)是001表示元 ...

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

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

  5. Appium日志乱码终结指北

    缘起 最近Android,IOS自动化多开群控都搞好了,但是Appium中的log 显示中文乱码问题像个苍蝇一样,看着感觉特别难受,挥之不去,抚之不平.论坛搜索了一下,很多帖子都反映过这个问题,但是都 ...

  6. MFC图片操作

    根据MFC要操作图片的来源,可分为以下两类: 一.非动态显示图片(即图片先通过资源管理器载入,有一个固定ID) 二.动态载入图片(即只需要在程序中指定图片的路径即可载入) 一.非动态显示图片 1.传送 ...

  7. 制作系统U盘

    没有任何宣传软件成分昂,我就是这做的. 1.在百度搜索上搜索“通用PE大师”,点开了这个网站http://up.6615261.cn/index.html,打开之后如下图,下载这个二合一版本 2.在电 ...

  8. 干了这碗鸡汤:从理发店小弟到阿里P10技术大牛

    1.引言 MIT TR 35(MIT Technology Review 35 Innovators Under 35)——“全球 35 位 35 岁以下科技创新青年”榜单,是全球最权威的青年科技创新 ...

  9. Webview 浏览器开源项目总结

    在Android开发中,我们不免会遇到使用WebView实现网页展示的需求,以下是本人之前star的开源项目,供大家参考: 一.CrosswalkWebview 项目地址:https://github ...

  10. git添加远程仓库

    3种方式 # 未创建项目目录git clone https://github.com/xxx/zzz.git [这里指定目标文件夹,不填写,默认创建 zzz目录] # 已存在项目文件,未设置远程仓库的 ...