一段簡單的代碼記錄如何通過 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");

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM