一段简单的代码记录如何通过 js 给 HTML 设置自定义属性,并且通过点击事件获取到所设置的自定义属性值
for (var i = 0; i <= 5; i++) {
const divJoinDay = document.createElement("div");
divJoinDay.style.padding = "6px 30px";
divJoinDay.style.backgroundColor = "#ffffff";
divJoinDay.style.color = "#000";
divJoinDay.style.borderBottom = "solid 1px #e6e6e6";
if (i === 0) {
divJoinDay.innerHTML = "待 选";
} else {
divJoinDay.innerHTML = "第 "+ i +" 天";
}
divJoinDay.setAttribute("data-day", i); divJoinDay.onmouseover = (e) => {
divJoinDay.style.backgroundColor = "#f39800";
};
divJoinDay.onmouseout = (e) => {
divJoinDay.style.backgroundColor = "#ffffff";
};
divJoinDay.onclick = (e) => {
const dayId = e.target.getAttribute("data-day");
alert("第 "+ dayId +" 天");
// 阻止冒泡事件
e.cancelBubble = true;
};
divPullDown.appendChild(divJoinDay);
}
设置值:
document.setAttribute("data-day", i);
点击事件获取值
e.target.getAttribute("data-day");
一段简单的代码记录如何通过 js 给 HTML 设置自定义属性,并且通过点击事件获取到所设置的自定义属性值的更多相关文章
- 【Scala】scala的继承能干嘛?这段简单的代码或许能帮你梳理
package cn.itcast.scala.demo2 class Person { //private关键字和final关键字修饰的常量无法被继承重写 val id: Int = 1 var n ...
- Winform中使用代码编写Button按钮的点击事件
场景 一般在进行Winform窗体开发时都会拖拽一个Button,然后双击进入Button按钮的点击事件中,进行 点击事件的编写. 如果窗体上事先没有Button按钮,是在代码中生成的Button按钮 ...
- 一段简单的显示当前页面FPS的代码
写前端代码,尤其是做一个前端框架的时候,经常需要及时知道代码的大致性能,这时候如果能有个好的办法能一直看到当前页面的fps就好了. 整体思路是一秒有一千毫秒,先记录当前时间作为最后一次记录fps的时间 ...
- 一段能瞬间秒杀所有版本IE的简单HTML代码
许多人都非常讨厌InternetExplorer,在西方万圣节即将到来之际,让我们来看一个真正吓人的东西——如何用一段简单的HTML和CSS,将任何版本的IE搞死.我们只需要简单地打开任意文本编辑器, ...
- 一段简单的关于字符串的 Java 代码竟考察了这么多东西
下面的代码运行结果是什么?解释一下为什么会有这些差异. String s1 = "hello";String s2 = s1 + ",world";String ...
- Lucene.net站内搜索—3、最简单搜索引擎代码
目录 Lucene.net站内搜索—1.SEO优化 Lucene.net站内搜索—2.Lucene.Net简介和分词Lucene.net站内搜索—3.最简单搜索引擎代码Lucene.net站内搜索—4 ...
- Net Core平台灵活简单的日志记录框架NLog+SqlServer初体验
Net Core平台灵活简单的日志记录框架NLog+SqlServer初体验 前几天分享的"[Net Core平台灵活简单的日志记录框架NLog+Mysql组合初体验][http://www ...
- Net Core平台灵活简单的日志记录框架NLog+Mysql组合初体验
Net Core平台灵活简单的日志记录框架NLog初体验 前几天分享的"[Net Core集成Exceptionless分布式日志功能以及全局异常过滤][https://www.cnblog ...
- 分享一段ios数据库代码,包括对表的创建、升级、增删查改
分享一段ios数据库代码.包括创建.升级.增删查改. 里面的那些类不必细究,主要是数据库的代码100%可用. 数据库升级部分,使用switch,没有break,低版本一次向高版本修改. // DB.h ...
随机推荐
- Mybatis学习总结--------Mybatis <where>标签 (九)
<select id="findActiveBlogLike" resultType="Blog"> SELECT * FROM BLOG WH ...
- 遍历HashMap的方法(四)
Map map = new HashMap(); for (Iterator iter = map.entrySet().iterator(); iter.hasNext();) { Map.Entr ...
- HDU 4635 Strongly connected (Tarjan+一点数学分析)
Strongly connected Time Limit : 2000/1000ms (Java/Other) Memory Limit : 32768/32768K (Java/Other) ...
- DevExpress使用教程:XtraGridControl动态添加右键菜单
在使用 GridControl 的时候经常需要添加右键菜单.一般的做法是自己创建菜单项,然后注册GridView的Mouse-Click事件,然后Show出定义好的菜单.但是涉及到一些单击事件会收到编 ...
- Redis Cluster(Redis集群)的搭建和使用
Reids集群准备知识: (1)Redis集群介绍 Redis 集群是一个提供在多个Redis间节点间共享数据的程序集. Redis集群并不支持处理多个keys的命令,因为这需要在不同的节点间移动数据 ...
- phpstorm 常用指令
先选中移动内容 块向右移动:Tab键 块向左移动:Shift + Tab键 ctrl+/行注释ctrl+shift+/块注释 ctrl+g跳转行 alt + 上/下 键实现在类中的方法切换ctrl + ...
- 揭秘Keras推荐系统如何建立模型、获取用户爱好
你是否有过这样的经历?当你在亚马逊商城浏览一些书籍,或者购买过一些书籍后,你的偏好就会被系统学到,系统会基于一些假设为你推荐相关书目.为什么系统会知道,在这背后又藏着哪些秘密呢? 荐系统可以从百万甚至 ...
- 应用“PUSH推送”的5个真相和5个误区
真相一:用户厌烦的并不是推送功能本身 针对如何看待推送功能这一问题,对1万名用户进行了问卷调查,结果表明80%的用户表示不会拒绝推送功能.各个年龄段方面没有太大的差别,但女性用户更容易受个人兴趣和 ...
- 1.2.1 Elevator
Elevator Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Problem De ...
- Eclipse中SVN的安装步骤(两种)和使用方法
Eclipse中SVN的安装步骤(两种)和使用方法 一.给Eclipse安装SVN,最常见的有两种方式:手动方式和使用安装向导方式.具体步骤如下: 方式一:手动安装 1.下载最新的Eclipse,我的 ...