一段简单的代码记录如何通过 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");

原文地址:https://www.cnblogs.com/liugx/p/9559452.html

时间: 2024-10-24 02:45:10

一段简单的代码记录如何通过 js 给 HTML 设置自定义属性,并且通过点击事件获取到所设置的自定义属性值的相关文章

一段简单的代码告诉你什么叫内存溢出

#include <stdio.h> int FooArray[4] = {1, 1, 1, 1}; int VeryImportantValue = 7; void main() { printf("%d\n", VeryImportantValue); for (int i = 0; i <= 4; i++) { FooArray[i] = 4; } printf("%d\n", VeryImportantValue); } 这是个很简单的内存

Shmily,如何用一段简单的代码讲述一个悲伤的故事?

搞了几个小时的都没打印出第一个原始的自己写的代码,结果原因只有一个"怪不得老是打不出来,原来把println 写成 printIn" main没写,让后面报错package没写,导致快捷键无法使用sum +=b[i]; sum+ =b[i];//字符使用的错误 错错错 越多的雾霾堆积,反而为会愈加强你下一次遇见太阳的幸福感然后,我就喜欢上for循环的功能了 Love+1Love+1+1Love+1+1+1Love+1+1+1+1Love+1+1+1+1+1Love+1+1+1+1+1+

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

写前端代码,尤其是做一个前端框架的时候,经常需要及时知道代码的大致性能,这时候如果能有个好的办法能一直看到当前页面的fps就好了. 整体思路是一秒有一千毫秒,先记录当前时间作为最后一次记录fps的时间,通过 requestAnimationFrame 回调不断给累加fsp计数器,并且判断上次记录fps的时间是否达到1000毫秒以上,如果满足条件,就将fps累加器的值作为当前fps显示,并且重置fps累加器. 这里写了段比较简单的显示FPS的代码: 1 var showFPS = (functio

js日期格式简单转换代码

js日期格式简单转换代码: 未经修饰的东西总是狂野粗糙的,比如人没有经过良好的教育,这人可能会有各种问题,同样js中的时间格式也是如此,所以要对时间进行一定的格式化操作,下面是一段非常简单的代码实例和大家分享一下. 代码如下: function dateStr(x,y) { var z={ y:x.getFullYear(), M:x.getMonth()+1, d:x.getDate(), h:x.getHours(), m:x.getMinutes(), s:x.getSeconds() }

原生ajax调用数据简单实例代码

原生ajax调用数据简单实例代码:由于jQuery的盛行,现在使用较多的是jQuery封装好了的ajax,因为解决了浏览器兼容性问题,这对程序员来说就等于去掉了一个心头大患,但并非原生ajax就销声匿迹,并且本人感觉还是对原生的ajax有所了解的好,下面就是一段ajax数据调用的实例代码,非常的简单,初学者可以参考一下.代码如下:一.兼容浏览器部分: function xmlHttpR() { var xmlhttp; if(window.XMLHttpRequest) { xmlhttp=ne

一段简单的汇编程序

.section .data < initialized data here > .section .bss < uninitialized data here > .section .text .global _start _start: < instruction code > 如上述代码所示,汇编程序通常包含3个段(section): data section bss section text section GNU assembler使用.section语句来声

最短路径 简单的代码

看了这些代码之后 总结了一下 其实就那三个for 循环 一:找与v有连接的点 .二:从这些连接的点找到最小,把他看成是下一次的v . 三: 你要把有出现的那些边 更新掉 . 详解在代码里写出了 #include #include #include using namespace std ; #define N 100 #define M 100 typedef struct node { int matrix[N][M] ; int n ; int e ; }Dgraph ; void Diji

Web开发者的福利 30段超实用CSS代码

1.花式连字符(&) 这个类应该在span元素里使用,并且里面包括&字符.它使用经典的serif字体和斜体来增强&符号. .amp { font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif; font-style: italic; font-weight: normal;} 2.段落首字符下沉 通常,这种效果会出现在印刷媒体上,如报纸或书籍.同样,如果网页布局合理,它也可以使用在We

Java连接MySQL数据库及简单操作代码

1.Java连接MySQL数据库 Java连接MySql需要下载JDBC驱动MySQL-connector-java-5.0.5.zip(举例,现有新版本).然后将其解压缩到任一目录.我是解压到D盘,然后将其目录下的MySQL-connector-java-5.0.5-bin.jar加到classpath里,具体如下: "我的电脑"-> "属性" -> "高级" -> "环境变量",在系统变量那里编辑clas