資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在所有 HTML 元素上嵌入自定義資料屬性？
在本文中，我們需要在所有 HTML 元素上嵌入自定義資料屬性。我們可以使用 HTML 中的 data-* 屬性來實現。
HTML 中的 data-* 屬性用於自定義網頁或應用程式專用的資料。此屬性會向 HTML 元素新增自定義值。
HTML 中的 data-* 屬性包含兩個部分：
屬性值可以是任何字串。
屬性名稱只能包含小寫字母，並且在“data-”字首之後至少必須有一個字元。
此資料通常用於 JavaScript 中以改善使用者體驗。以下是將自定義資料屬性嵌入 HTML 元素的示例。
示例 1
在此示例中，
我們列出了三個（服裝）並附加了自定義 data-id 和 data-price 資料。
此處，資料屬性對使用者不可見。
儘管使用者無法看到這些值，但這些值將存在於文件中。
<!DOCTYPE html> <html> <head> <title>How do we embed custom data attributes on all HTML elements? </title> </head> <body> <ul> <li data-id="1" data-price="INR 1899">Shirt</li> <li data-id="2" data-price="INR 2799">Pant</li> <li data-id="3" data-price="INR 4599">Jacket</li> </ul> </body> </html>
這些值沒有顯示，因為我們沒有提取我們指定的自定義屬性。
示例 2
在此示例中，
我們在 HTML 表格內建立了四個帶標籤的連結。
每個元素都有一個自定義 data-plyr-type 屬性，其中包含一個播放器名稱。
我們使用了 onClick 事件來提取自定義屬性。
每當我們點選這些元素時，JavaScript 函式都會提取並顯示球員的國家/地區名稱。
<!DOCTYPE html> <html> <head> <script> function showData(plyr) { var players = plyr.getAttribute("data-plyr-type"); alert(plyr.innerHTML + " is a " + players + "."); } </script> </head> <body> <h1>Cricketers!</h1> <p>Click on a player to see which team he belongs to:</p> <table border=2 px;> <caption>Players</caption> <tr> <td onclick="showData(this)" id="owl" data-plyr-type="Afganistan player">Rashid khan</td> <td onclick="showData(this)" id="owl" data-plyr-type="Pakistan player">Babar azam</td> </tr> <tr> <td onclick="showData(this)" id="salmon" data-plyr-type="England player">Jos Buttler</td> <td onclick="showData(this)" id="salmon" data-plyr-type="Australia player">Steve smith</td> </tr> <tr> <td onclick="showData(this)" id="tarantula" data-plyr-type="India player">Jasprit bumrah</td> <td onclick="showData(this)" id="tarantula" data-plyr-type="West indies player">Jason holder</td> </tr> </table> </body> </html>
如輸出所示，當用戶點選任何板球運動員的表格資料時，自定義屬性將被提取並顯示該特定球員的國家/地區名稱。
更新於：2022年11月8日
496 次瀏覽
廣告