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. spring cloud 学习(二)关于 Eureka 的学习笔记

    关于 Eureka 的学习笔记 个人博客地址 : https://zggdczfr.cn/ ,欢迎光临~ 前言 Eureka是Netflix开发的服务发现组件,本身是一个基于REST的服务.Sprin ...

  2. learning ext2 filesystem notes

    reference:  http://e2fsprogs.sourceforge.net/ext2intro.html reference: http://www.nongnu.org/ext2-do ...

  3. python自动化运维之路06

    python中面向对象编程 编程范式: 编程是 程序 员 用特定的语法+数据结构+算法组成的代码来告诉计算机如何执行任务的过程 , 一个程序是程序员为了得到一个任务结果而编写的一组指令的集合,正所谓条 ...

  4. C#中使用Spire.docx操作Word文档

    使用docx一段时间之后,一些地方还是不方便,然后就尝试寻找一种更加简便的方法. 之前有尝试过使用Npoi操作word表格,但是太烦人了,随后放弃,然后发现免费版本的spire不错,并且在莫种程度上比 ...

  5. PSP个人软件开发系统面向对象需求分析与设计文档

    1.引言 1.1编写的目的 编写该文档的目的是,对产品进行定义,详尽说明该产品的软件需求,简述我们对 PSP个人软件开发系统的初步设想,及划分的各功能模块以及各模块的实体图和数据流图. 1.2预期的读 ...

  6. sping整合redis,以及做mybatis的第三方缓存

    一.spring整合redis Redis作为一个时下非常流行的NOSQL语言,不学一下有点过意不去. 背景:学习Redis用到的框架是maven+spring+mybatis(框架如何搭建这边就不叙 ...

  7. Java内存不足之PermGen space错误探究

    一.Java 程序的运行机制与普通程序,如C或C++ 程序的运行机制有很大的区别. 普通程序运行之前必须首先编译成可执行的二进制码或机器码.机器码是与底层的硬件结构相关的,即使书写源代码的时候没有利用 ...

  8. Python 字典的嵌套

    wf = { "name":"汪峰", "age":52, "hobby":["唱歌", " ...

  9. vue 登录验证引擎

    1.router配置: 路由元信息 const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: ...

  10. bg-script 错误信息显示,以及global

    chrome.developerPrivate.openDevTools({ renderViewId: -1, renderProcessId: -1, extensionId: chrome.ru ...