分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

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

发布时间:2023-09-06 02:12责任编辑:顾先生关键词:jsHTML点击事件
 ???????????????????????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 设置自定义属性,并且通过点击事件获取到所设置的自定义属性值

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved