Panduan Atribut Data HTML

Jadual Kandungan

1. Pengenalan
2. Tatabahasa
3. Gaya menggunakan atribut data
4. Mengakses sifat data dalam JavaScript

Pengenalan

Unsur -unsur HTML boleh mempunyai atribut yang digunakan untuk sebarang tujuan, dari maklumat kebolehaksesan ke kawalan gaya.

<div aria-label="Names" role="region"></div>

Pendekatan yang tidak terikat adalah untuk mewujudkan sifat anda sendiri, atau menggunakan semula sifat sedia ada untuk ciri-ciri yang tidak berkaitan.

<div highlight="true"></div>
<div width="large"></div>

Terdapat banyak sebab buruk untuk melakukan ini. HTML anda akan menjadi tidak sah, yang mungkin tidak mempunyai kesan negatif sebenar, tetapi akan kehilangan perasaan hangat dan kabur HTML yang berkesan. Alasan yang paling menarik ialah HTML adalah bahasa yang berkembang, dan hanya kerana sifat dan nilai yang tidak berfungsi hari ini tidak bermakna mereka tidak akan bekerja pada masa akan datang.

Berita baiknya ialah: anda boleh membuat sifat anda sendiri. Anda hanya perlu awalan mereka dengan data-* dan anda boleh melakukan apa sahaja yang anda mahukan!

Tatabahasa

Ia sangat mudah untuk dapat membuat atribut HTML anda sendiri dan meletakkan maklumat anda sendiri ke dalamnya. Nasib baik, anda boleh melakukannya! Inilah atribut data yang digunakan. Mereka kelihatan seperti ini:

<div data-foo=""></div>
<div data-size="large"></div>

Atribut data sering dipanggil data-* atribut kerana mereka sentiasa dalam format ini. data perkataan, kemudian dash - , kemudian teks lain yang anda boleh fikirkan.

Bolehkah anda menggunakan atribut data sahaja?

<div data=""></div>

Ini mungkin tidak menyebabkan sebarang kemudaratan, tetapi anda tidak akan dapat mendapatkan API JavaScript yang akan kami sampaikan kemudian dalam panduan ini. Anda sebenarnya mencipta atribut untuk diri sendiri, yang tidak digalakkan, seperti yang saya nyatakan dalam pengenalan.

Apa yang tidak boleh dilakukan dengan atribut data

Simpan kandungan yang harus diakses. Sekiranya kandungannya dapat dilihat atau dibaca pada halaman, jangan hanya memasukkannya ke dalam sifat data, dan pastikan kandungannya berada di dalam kandungan HTML.

<div data-name="Chris Coyier"></div>
<div>
  Chris Coyier
</div>

Berikut adalah maklumat lanjut mengenai kandungan tersembunyi.

Gaya menggunakan atribut data

CSS boleh memilih elemen HTML berdasarkan atribut dan nilai mereka.

 /* Pilih mana -mana elemen dengan atribut data dan nilai ini*/
[data-saiz = "besar"] {
  Padding: 2rem;
  saiz font: 125%;
}
/* Anda boleh mengehadkannya ke elemen atau kelas atau apa -apa lagi*/
butang [data-jenis = "muat turun"] {}
.Card [data-pad = "extra"] {}

Ini boleh menjadi menarik. Cangkuk gaya utama dalam HTML/CSS adalah kelas, dan sementara kelas hebat (mereka mempunyai kekhususan sederhana dan kaedah JavaScript yang bagus melalui classList ), unsur -unsur sama ada memilikinya atau tidak memilikinya (pada dasarnya hidup atau mati ). Menggunakan atribut data-* , anda boleh mendapatkan ciri giliran/mati ini, serta keupayaan untuk memilih berdasarkan nilainya pada tahap kekhususan yang sama.

 / * Jika harta itu wujud, pilih */
[saiz data] {}
/* Pilih sama ada atribut mempunyai nilai tertentu*/
[Data-State = "Open"],
[aria-expanded = "true"] {}
/ * "Mulailah dengan ..." pemilih, yang bermaksud ini akan sepadan dengan "3" atau mana -mana watak bermula dengan 3, seperti "3.14" */
[Data-version^= "3"] {}
/ * "Termasuk" bermaksud jika nilai mengandungi rentetan di mana sahaja */
[data-company*= "Google"] {}

Kekhususan pemilih atribut

Ia sama seperti kelas. Kami biasanya menganggap kekhususan sebagai nilai empat bahagian:

Gaya sebaris, ID, kelas/sifat, tag

Oleh itu, pemilih harta individu adalah 0, 0, 1, 0 . Pemilih seperti ini:

 div.card [data-foo = "bar"] {}

akan menjadi 0, 0, 2, 1 . 2 adalah kerana terdapat kelas ( .card ) dan harta ( [data-foo="bar"] ), dan 1 adalah kerana terdapat tag ( div ).

Kekhususan pemilih atribut lebih rendah daripada ID, lebih tinggi daripada elemen/tag, sama dengan kelas.

Nilai harta yang tidak sensitif

Sekiranya anda perlu membetulkan kemungkinan ketidakkonsistenan kes dalam sifat data, pemilih harta menyediakan varian yang tidak sensitif untuk ini.

 /* Akan sepadan<div data-state="open"></div>
<div data-state="Open"></div>
<div data-state="OPEN"></div>
<div data-state="oPeN"></div>
*/
[data-state = "buka" i] {}

Ia adalah huruf kecil i dalam pemilih kurungan persegi.

Bayangkan sifat data penggunaan

CSS membolehkan anda mengekstrak nilai atribut data dan memaparkannya apabila diperlukan.

 /*<div data-emoji="✅"> */
[data-emoji] :: sebelum {
  Kandungan: ATTR (Data-Emoji); / * Kembali '✅' */
  margin-kanan: 5px;
}<h4 id="Contoh-penggunaan-gaya"> Contoh penggunaan gaya</h4>
<p> Anda boleh menggunakan atribut data untuk menentukan bilangan lajur yang diperlukan untuk bekas grid.</p>
<pre class="brush:php;toolbar:false"><div data-columns="2"></div>
<div data-columns="3"></div>
<div data-columns="4"></div>

Mengakses sifat data dalam JavaScript

Seperti mana -mana atribut lain, anda boleh mengakses nilai menggunakan kaedah getAttribute biasa.

 biarkan nilai = el.getAttribute ("Data-State");
// Anda juga boleh menetapkan nilai.
// pulangan data-state = "runtuh"
el.setAttribute ("Data-State", "Runtuh");

Tetapi atribut data juga mempunyai API khas mereka sendiri. Katakan anda mempunyai elemen dengan pelbagai atribut data (ini benar -benar ok):

Jika elemen anda mempunyai rujukan, anda boleh menetapkan dan mendapatkan sifat seperti ini:

 // mendapatkan span.dataset.info; // 123
span.dataset.index; // 2
// set span.dataset.prefix = "Mr.";
span.dataset.emojiicon = "?";

Perhatikan tatanama unta pada baris terakhir. Ia secara automatik menukarkan atribut gaya kebab dalam HTML (seperti data-this-little-piggy ) kepada nomenclature unta dalam JavaScript (seperti dataThisLittlePiggy ).

API ini boleh dikatakan tidak sebaik classList , classList mempunyai kaedah yang jelas untuk menambah, memadam, menukar dan menggantikan, tetapi ia lebih baik daripada apa -apa.

Anda juga boleh mengakses dataset dalam talian:

Data json dalam sifat data

Mengapa tidak? Ia hanya rentetan yang boleh diformat ke dalam JSON yang sah (perhatikan sebut harga, dan lain -lain). Anda boleh mengekstrak data dan menghuraikannya seperti yang diperlukan.

 const el = document.QuerySelector ("li");
biarkan json = el.dataset.person;
biarkan data = json.parse (json);
console.log (data.name); // Chris Coyier
console.log (data.job); // orang web

Kes penggunaan JavaScript

Konsepnya ialah anda boleh menggunakan sifat data untuk meletakkan maklumat ke HTML, yang JavaScript mungkin perlu diakses untuk melaksanakan operasi tertentu.

Contoh umum berkaitan dengan fungsi pangkalan data. Katakan anda mempunyai butang "suka":

♡

Butang ini boleh mengklik pengendali, yang melakukan permintaan AJAX ke pelayan apabila diklik untuk meningkatkan bilangan suka dalam pangkalan data. Ia tahu rekod mana yang akan dikemas kini kerana ia mendapatnya dari sifat data.

spesifikasi

• Tahap Pemilih 4 (Draf Kerja)
• Tahap pemilih 3 (disyorkan)
• Tahap Pemilih 2, Semakan 1 (Definisi Awal)

Sokongan penyemak imbas

Penyemak imbas ini menyokong data dari CANIUSE, yang mengandungi lebih banyak maklumat. Nombor menunjukkan bahawa penyemak imbas menyokong ciri ini dalam versi ini dan kemudian.

Desktop

PC mudah alih/tablet