我們如何在所有HTML元素上嵌入自訂資料屬性？
- PHPz轉載
- 2023-08-28 12:49:061320瀏覽
在本文中，我們需要在所有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
在這個例子中，
We’ve created four links with tags inside the HTML table.
每個元素都有一個自訂的data-plyr-type屬性，其中包含一個播放器名稱。
我們使用了 onClick 事件來提取自訂屬性。
每當我們點擊
<a></a>元素時，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>
正如我們在輸出中所看到的，當使用者點擊任何一位板球運動員的表格資料時，將提取自訂屬性並顯示特定球員的國家名稱。
以上是我們如何在所有HTML元素上嵌入自訂資料屬性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除