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 设置自定义属性,并且通过点击事件获取到所设置的自定义属性值的更多相关文章

  1. 【Scala】scala的继承能干嘛?这段简单的代码或许能帮你梳理

    package cn.itcast.scala.demo2 class Person { //private关键字和final关键字修饰的常量无法被继承重写 val id: Int = 1 var n ...

  2. Winform中使用代码编写Button按钮的点击事件

    场景 一般在进行Winform窗体开发时都会拖拽一个Button,然后双击进入Button按钮的点击事件中,进行 点击事件的编写. 如果窗体上事先没有Button按钮,是在代码中生成的Button按钮 ...

  3. 一段简单的显示当前页面FPS的代码

    写前端代码,尤其是做一个前端框架的时候,经常需要及时知道代码的大致性能,这时候如果能有个好的办法能一直看到当前页面的fps就好了. 整体思路是一秒有一千毫秒,先记录当前时间作为最后一次记录fps的时间 ...

  4. 一段能瞬间秒杀所有版本IE的简单HTML代码

    许多人都非常讨厌InternetExplorer,在西方万圣节即将到来之际,让我们来看一个真正吓人的东西——如何用一段简单的HTML和CSS,将任何版本的IE搞死.我们只需要简单地打开任意文本编辑器, ...

  5. 一段简单的关于字符串的 Java 代码竟考察了这么多东西

    下面的代码运行结果是什么?解释一下为什么会有这些差异. String s1 = "hello";String s2 = s1 + ",world";String ...

  6. Lucene.net站内搜索—3、最简单搜索引擎代码

    目录 Lucene.net站内搜索—1.SEO优化 Lucene.net站内搜索—2.Lucene.Net简介和分词Lucene.net站内搜索—3.最简单搜索引擎代码Lucene.net站内搜索—4 ...

  7. Net Core平台灵活简单的日志记录框架NLog+SqlServer初体验

    Net Core平台灵活简单的日志记录框架NLog+SqlServer初体验 前几天分享的"[Net Core平台灵活简单的日志记录框架NLog+Mysql组合初体验][http://www ...

  8. Net Core平台灵活简单的日志记录框架NLog+Mysql组合初体验

    Net Core平台灵活简单的日志记录框架NLog初体验 前几天分享的"[Net Core集成Exceptionless分布式日志功能以及全局异常过滤][https://www.cnblog ...

  9. 分享一段ios数据库代码,包括对表的创建、升级、增删查改

    分享一段ios数据库代码.包括创建.升级.增删查改. 里面的那些类不必细究,主要是数据库的代码100%可用. 数据库升级部分,使用switch,没有break,低版本一次向高版本修改. // DB.h ...

随机推荐

  1. oracle12c新特点之可插拔数据库(Pluggable Database,PDB)

    1.    12c PDB新特点的优势 1)    可以把多个PDB集成进一个平台. 2)    可以快速提供一个新的PDB或一个已有PDB的克隆. 3)    通过拔插技术,可以快速把存在的数据库重 ...

  2. AIOps探索:基于VAE模型的周期性KPI异常检测方法——VAE异常检测

    AIOps探索:基于VAE模型的周期性KPI异常检测方法 from:jinjinlin.com   作者:林锦进 前言 在智能运维领域中,由于缺少异常样本,有监督方法的使用场景受限.因此,如何利用无监 ...

  3. JavaScript学习总结(十一)——Object类详解

    一.Object类介绍 Object类是所有JavaScript类的基类(父类),提供了一种创建自定义对象的简单方式,不再需要程序员定义构造函数. 二.Object类主要属性 1.constructo ...

  4. 亿图图示与visio结合使用

    亿图图示与visio结合使用 Model 图例   思维导图 Camp Awards 思维导图 思维导图 Englilsh camp activity plan 项目管理 Auto WBS 商务 错误 ...

  5. Webserivce简单安全验证

    最近新接了一个需要调用第三方WebService的项目,看到这个第三方WebService被调用的时候,需要授权用户名和密码,于是自己也想对WebService的安全授权这个方面进行了一下研究,以前调 ...

  6. MySQL5.7 主从复制配置

    一.主从复制原理 MySQL 主从复制是一个异步的复制过程,主库发送更新事件到从库,从库读取更新记录,并执行更新记录,使得从库的内容与主库保持一致.每一个主从复制的连接,都有三个线程.拥有多个从库的主 ...

  7. HDTunePro汉化版温度显示不正常后需要更改

    查找:2564B046000000002564B043替换:2564A848000000002564A1E6 查找:B0432F2564B046替换:A1E62F2564A848

  8. 移动端自动化openatx开源项目介绍,pytest并发测试框架结合

    开头 相信不少用过appium的同学,对于使用appium的一些体会与感受是否与我相似 1. appium启动服务和app程序非常慢 2. appium多线程并发需要启动多个服务 3. appium必 ...

  9. HP LoadRunner 12.02 Tutorial T7177-88037教程独家中文版

    HP LoadRunner 12.02 Tutorial T7177-88037教程独家中文版 Tylan独家呕血翻译 转载请注明出自“天外归云”的博客园 Welcome to the LoadRun ...

  10. magento如何安装语言包

    1,先下安装,直接在www.magento.com(搜索chinese)官网获得下载密钥,然后在下载站点输入密钥就可以下载,下载完成后的安装包放到app/local文件夹下即可,到后台刷新一下: 2线 ...