给HTML页面指定元素添加属性,添加父元素
给HTML页面指定元素添加属性,添加父元素
下面拿一个给富文本中所有的图片增加layer弹窗效果。
思路:
- 给富文本父元素设置属性。
- 获取父元素里所有的img 此处用到querySelectorAll 函数
- 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页面指定元素添加属性,添加父元素的更多相关文章
- 关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位)
关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位) 起因:在进行bootstrap的.navbar-brand内文字设置垂直居中时采用li ...
- HTML 文档流,设置元素浮动,导致父元素高度无法自适应的解决方法(高度欺骗)
元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...
- 解决:子元素设置margin-top,父元素也受影响的问题
<!doctype html><html> <head> <meta charset="UTF-8"> <title>子 ...
- CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- jQuery 对页面元素的搜索包括父元素、同辈元素、子元素的搜索
1.父元素搜索 (1)parents([selector]) 方法 $("p").parents().css("border","1px solid ...
- 子元素应该margin-top影响父元素的解决办法
在子元素设置margin-top,有时会带着父元素一起移动. 原因: Outer Div [margin: 0 auto] Inner Div [margin-top: 10px] 根据CSS2.1盒 ...
- 子元素设置margin-top,父元素也受影响
这个问题困惑了非常久.尽管没有大碍早就摸出来怎么搞定它.但始终不明确原因出在哪里,假设仅仅是IE有问题我也不会太在意.可问题是全部上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出来怎么回事, ...
- html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡
如果子元素和父元素都有点击事件,会出现点击事件冒泡的情况. 1.如何避免冒泡: html: <html> <head></head> <body> &l ...
- CSSmargin击穿问题(子元素margin-top会影响父元素)
最近写一个H5页面的时候发现了这个被忽视的问题,一时没想到什么原因,搜了半天,记录一下,方便他人踩坑.唉,有些东西不用就忘. 一.问题描述 <div class="container& ...
- 子元素的margin-top影响父元素原因和解决办法
这个问题会出现在所有浏览器当中,原因是css2.1盒子模型中规定, In this specification, the expression collapsing margins means tha ...
随机推荐
- Python开发——16.HTML
一.HTML 1.服务端 import socket def main(): sock = socket.socket(socket.AF_INET,socket.SOCK_STREAM) sock. ...
- Forward团队-爬虫豆瓣top250项目-最终程序
托管平台地址:https://github.com/xyhcq/top250 小组名称:Forward团队 小组成员合照: 程序运行方法: 在python中打开程序并运行:或者直接执行程序即可运行 程 ...
- 如何更改github工程的语言属性
当创建github项目的时候,github本身会根据提交文件的数量来自动推断工程的开发语言,有时这种推断结果会与实际情况不太相符.比如上传一个java的web工程,如果在工程里存在大量的html.ja ...
- 我的C#跨平台之旅(四):使用AOP(filter、attribute)进行系统增强
1.使用OData提速REST API开发 引入NuGet包:Microsoft.AspNet.WebApi.OData 在启动类中添加如下配置(示例为全局配置,也可基于Controller或Acti ...
- FPGA定点小数计算中截位形式的探讨
在FPGA设计过程中难免会碰到需要进行截位,那定点小数的计算过程中我们需要注意些什么呢? 首先,我们考虑如下计算式. sin cos 数据形式是 FIX_32_30 X Y Z 数据形式是 FIX_3 ...
- ElasticSearch写入数据的工作原理是什么?
面试题 es 写入数据的工作原理是什么啊?es 查询数据的工作原理是什么啊?底层的 lucene 介绍一下呗?倒排索引了解吗? 面试官心理分析 问这个,其实面试官就是要看看你了解不了解 es 的一些基 ...
- 吴恩达机器学习笔记8-多变量线性回归(Linear Regression with Multiple Variables)--多维特征
我们探讨了单变量/特征的回归模型,现在我们对房价模型增加更多的特征,例如房间数楼层等,构成一个含有多个变量的模型,模型中的特征为(
- C#遍历文件夹下面所有指定格式文件
C#遍历指定文件夹中的所有文件 DirectoryInfo TheFolder=new DirectoryInfo(folderFullName);//遍历文件夹foreach(DirectoryIn ...
- onload事件与ready事件的区别,原生js与jquery的区别
onload事件与ready事件分别是原生js与jquery的入口函数 原生js入口函数写法: window.onload=function(){ } jquery入口函数写法: $(document ...
- Python常用模块——目录
Python常用模块学习 Python模块和包 Python常用模块time & datetime &random 模块 Python常用模块os & sys & sh ...