Rumah > Artikel > hujung hadapan web > Bagaimanakah kita boleh membenamkan atribut data tersuai pada semua elemen HTML?
Bagaimanakah kita boleh membenamkan atribut data tersuai pada semua elemen HTML?
- PHPzke hadapan
- 2023-08-28 12:49:061320semak imbas
Dalam artikel ini, kita perlu membenamkan atribut data tersuai pada semua elemen HTML. Kita boleh menggunakan atribut data-* dalam HTML untuk mencapai ini.
Dalam HTML, atribut data-* digunakan untuk menyesuaikan data yang peribadi hanya untuk halaman web atau aplikasi. Atribut ini menambah nilai tersuai pada elemen HTML.
Atribut data-* dalam HTML terdiri daripada dua bahagian −
Nilai atribut boleh berupa sebarang rentetan.
Nama atribut hendaklah mengandungi hanya huruf kecil dan mesti mempunyai sekurang-kurangnya satu aksara selepas awalan "data-".
Data ini sering digunakan dalam JavaScript untuk meningkatkan pengalaman pengguna. Berikut ialah contoh membenamkan atribut data tersuai pada elemen HTML.
Contoh 1
Dalam contoh ini,
-
Kami telah menyenaraikan tiga (pakaian) dengan data data-id dan
data-harga tersuai
Di sini, atribut data tidak kelihatan kepada pengguna.
Walaupun nilai tidak akan kelihatan kepada pengguna, nilai tersebut akan terdapat dalam dokumen.
<!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>
Nilai ini tidak ditunjukkan kerana kami tidak mengeluarkan sifat tersuai yang kami tentukan.
Contoh 2
Dalam contoh ini,
Kami telah mencipta empat pautan dengan tag di dalam jadual HTML.
Setiap elemen mempunyai atribut data-plyr-type tersuai yang mengandungi nama pemain.
Kami menggunakan acara onClick untuk mengekstrak sifat tersuai.
Setiap kali kita mengklik pada elemen
<a></a>, fungsi JavaScript mengekstrak dan memaparkan nama negara pemain.
<!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>
Seperti yang dapat kita lihat dalam output, apabila pengguna mengklik pada data jadual mana-mana pemain kriket, atribut tersuai diekstrak dan nama negara pemain tertentu dipaparkan.
Atas ialah kandungan terperinci Bagaimanakah kita boleh membenamkan atribut data tersuai pada semua elemen HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!