Elemen HTML dapat memiliki atribut yang digunakan untuk apa saja mulai dari informasi aksesibilitas hingga kontrol gaya
<!-- We can use the `class` for styling in CSS, and we've also make this into a landmark region --> <div class="names" role="region" aria-label="Names"></div>Apa yang tidak disarankan adalah membuat atribut Anda sendiri, atau menggunakan kembali atribut yang ada untuk fungsionalitas yang tidak terkait
<!-- `highlight` is not an HTML attribute --> <div highlight="true"></div> <!-- `large` is not a valid value of `width` --> <div width="large">_Ada berbagai alasan mengapa ini buruk. HTML Anda menjadi tidak valid, yang mungkin tidak memiliki konsekuensi negatif yang sebenarnya, tetapi merampas perasaan HTML valid yang kabur dan hangat itu. Alasan yang paling meyakinkan adalah bahwa HTML adalah bahasa yang hidup dan hanya karena atribut dan nilai yang tidak melakukan apa-apa hari ini tidak berarti mereka tidak akan pernah melakukannya.
Kabar baik. Anda dapat membuat atribut Anda sendiri. Anda hanya perlu mengawalinya dengan <!-- `highlight` is not an HTML attribute --> <div highlight="true"></div> <!-- `large` is not a valid value of `width` --> <div width="large">_8 dan kemudian Anda bebas melakukan apa yang Anda suka
Sintaksis
Akan sangat berguna untuk dapat membuat atribut HTML Anda sendiri dan memasukkan informasi Anda sendiri di dalamnya. Untungnya, Anda bisa. Itulah tepatnya atribut data. Mereka seperti ini
<!-- They don't need a value --> <div data-foo></div> <!-- ...but they can have a value --> <div data-size="large"></div> <!-- You're in HTML here, so careful to escape code if you need to do something like put more HTML inside --> <li data-prefix="Careful with HTML in here."><li> <!-- You can keep dashing if you like --> <aside data-some-long-attribute-name><aside>Atribut data sering disebut sebagai <!-- `highlight` is not an HTML attribute --> <div highlight="true"></div> <!-- `large` is not a valid value of `width` --> <div width="large">_8 atribut, karena selalu diformat seperti itu. Kata <!-- They don't need a value --> <div data-foo></div> <!-- ...but they can have a value --> <div data-size="large"></div> <!-- You're in HTML here, so careful to escape code if you need to do something like put more HTML inside --> <li data-prefix="Careful with HTML in here."><li> <!-- You can keep dashing if you like --> <aside data-some-long-attribute-name><aside>_0, lalu tanda hubung <!-- They don't need a value --> <div data-foo></div> <!-- ...but they can have a value --> <div data-size="large"></div> <!-- You're in HTML here, so careful to escape code if you need to do something like put more HTML inside --> <li data-prefix="Careful with HTML in here."><li> <!-- You can keep dashing if you like --> <aside data-some-long-attribute-name><aside>1, lalu teks lain yang dapat Anda buat
Bisakah Anda menggunakan atribut <!-- They don't need a value --> <div data-foo></div> <!-- ...but they can have a value --> <div data-size="large"></div> <!-- You're in HTML here, so careful to escape code if you need to do something like put more HTML inside --> <li data-prefix="Careful with HTML in here."><li> <!-- You can keep dashing if you like --> <aside data-some-long-attribute-name><aside>_0 saja?
<div data=""></div>_Ini mungkin tidak akan merugikan apa pun, tetapi Anda tidak akan mendapatkan API JavaScript yang akan kami bahas nanti dalam panduan ini. Anda pada dasarnya membuat atribut untuk diri sendiri, yang seperti yang saya sebutkan di intro, tidak dianjurkan
Apa yang tidak boleh dilakukan dengan atribut data
Menyimpan konten yang seharusnya dapat diakses. Jika konten harus dilihat atau dibaca di halaman, jangan hanya menempatkannya di atribut data, tetapi pastikan konten tersebut ada di konten HTML di suatu tempat
Ini lebih lanjut tentang menyembunyikan sesuatu
Styling dengan atribut data
CSS dapat memilih elemen HTML berdasarkan atribut dan nilainya
/* Select any element with this data attribute and value */ [data-size="large"] { padding: 2rem; font-size: 125%; } /* You can scope it to an element or class or anything else */ button[data-type="download"] { } .card[data-pad="extra"] { }Ini bisa menarik. Pengait gaya yang dominan dalam HTML/CSS adalah kelas, dan meskipun kelasnya bagus (mereka memiliki kekhususan sedang dan metode JavaScript yang bagus melalui <!-- They don't need a value --> <div data-foo></div> <!-- ...but they can have a value --> <div data-size="large"></div> <!-- You're in HTML here, so careful to escape code if you need to do something like put more HTML inside --> <li data-prefix="Careful with HTML in here."><li> <!-- You can keep dashing if you like --> <aside data-some-long-attribute-name><aside>3) sebuah elemen memilikinya atau tidak (pada dasarnya aktif atau tidak aktif). Dengan atribut <!-- `highlight` is not an HTML attribute --> <div highlight="true"></div> <!-- `large` is not a valid value of `width` --> <div width="large">_8, Anda mendapatkan kemampuan aktif/nonaktif ditambah kemampuan untuk memilih berdasarkan nilai yang dimilikinya pada tingkat kekhususan yang sama
/* Selects if the attribute is present at all */ [data-size] { } /* Selects if the attribute has a particular value */ [data-state="open"], [aria-expanded="true"] { } /* "Starts with" selector, meaning this would match "3" or anything starting with 3, like "3.14" */ [data-version^="3"] { } /* "Contains" meaning if the value has the string anywhere inside it */ [data-company*="google"] { }Kekhususan pemilih atribut
Itu sama persis dengan kelas. Kita sering menganggap spesifisitas sebagai nilai empat bagian
gaya sebaris, ID, kelas/atribut, tag
Jadi pemilih atribut tunggal saja adalah 0, 0, 1, 0. Seorang pemilih seperti ini
div.card[data-foo="bar"] { }…akan menjadi 0, 0, 2, 1. Angka 2 karena ada satu kelas (<!-- They don't need a value --> <div data-foo></div> <!-- ...but they can have a value --> <div data-size="large"></div> <!-- You're in HTML here, so careful to escape code if you need to do something like put more HTML inside --> <li data-prefix="Careful with HTML in here."><li> <!-- You can keep dashing if you like --> <aside data-some-long-attribute-name><aside>_5) dan satu atribut (<!-- They don't need a value --> <div data-foo></div> <!-- ...but they can have a value --> <div data-size="large"></div> <!-- You're in HTML here, so careful to escape code if you need to do something like put more HTML inside --> <li data-prefix="Careful with HTML in here."><li> <!-- You can keep dashing if you like --> <aside data-some-long-attribute-name><aside>6), dan angka 1 karena ada satu tag (<!-- They don't need a value --> <div data-foo></div> <!-- ...but they can have a value --> <div data-size="large"></div> <!-- You're in HTML here, so careful to escape code if you need to do something like put more HTML inside --> <li data-prefix="Careful with HTML in here."><li> <!-- You can keep dashing if you like --> <aside data-some-long-attribute-name><aside>7)
Pemilih atribut memiliki kekhususan yang lebih rendah daripada ID, lebih dari elemen/tag, dan sama dengan kelas
Nilai atribut case-insensitive
Jika Anda perlu mengoreksi kemungkinan ketidakkonsistenan kapitalisasi dalam atribut data Anda, pemilih atribut memiliki varian case-insensitive untuk itu
/* Will match <div data-state="open"></div> <div data-state="Open"></div> <div data-state="OPEN"></div> <div data-state="oPeN"></div> */ [data-state="open" i] { }Ini adalah <!-- They don't need a value --> <div data-foo></div> <!-- ...but they can have a value --> <div data-size="large"></div> <!-- You're in HTML here, so careful to escape code if you need to do something like put more HTML inside --> <li data-prefix="Careful with HTML in here."><li> <!-- You can keep dashing if you like --> <aside data-some-long-attribute-name><aside>_8 kecil di dalam pemilih tanda kurung
Menggunakan atribut data secara visual
CSS memungkinkan Anda untuk menarik keluar nilai atribut data dan menampilkannya jika perlu
/* <div data-emoji="✅"> */ [data-emoji]::before { content: attr(data-emoji); /* Returns '✅' */ margin-right: 5px; }Contoh kasus penggunaan gaya
Anda bisa menggunakan atribut data untuk menentukan berapa banyak kolom yang Anda inginkan untuk wadah kisi
<!-- `highlight` is not an HTML attribute --> <div highlight="true"></div> <!-- `large` is not a valid value of `width` --> <div width="large">_0CodePen Embed Fallback
Mengakses atribut data dalam JavaScript
Seperti atribut lainnya, Anda dapat mengakses nilai dengan metode generik <!-- They don't need a value --> <div data-foo></div> <!-- ...but they can have a value --> <div data-size="large"></div> <!-- You're in HTML here, so careful to escape code if you need to do something like put more HTML inside --> <li data-prefix="Careful with HTML in here."><li> <!-- You can keep dashing if you like --> <aside data-some-long-attribute-name><aside>9
<!-- `highlight` is not an HTML attribute --> <div highlight="true"></div> <!-- `large` is not a valid value of `width` --> <div width="large">_1Tetapi atribut data juga memiliki API khusus mereka sendiri. Katakanlah Anda memiliki elemen dengan banyak atribut data (yang benar-benar baik-baik saja)
<!-- `highlight` is not an HTML attribute --> <div highlight="true"></div> <!-- `large` is not a valid value of `width` --> <div width="large">_2Jika Anda memiliki referensi ke elemen tersebut, Anda dapat mengatur dan mendapatkan atribut seperti
Perhatikan penggunaan camelCase pada baris terakhir di sana. Ini secara otomatis mengonversi atribut gaya kebab dalam HTML, seperti <div data=""></div>0, menjadi gaya camelCase dalam JavaScript, seperti <div data=""></div>1
API ini bisa dibilang tidak sebaik <!-- They don't need a value --> <div data-foo></div> <!-- ...but they can have a value --> <div data-size="large"></div> <!-- You're in HTML here, so careful to escape code if you need to do something like put more HTML inside --> <li data-prefix="Careful with HTML in here."><li> <!-- You can keep dashing if you like --> <aside data-some-long-attribute-name><aside>3 dengan metode <div data=""></div>3, <div data=""></div>4, <div data=""></div>5, dan <div data=""></div>6 yang jelas, tetapi lebih baik daripada tidak sama sekali
Anda juga memiliki akses ke kumpulan data sebaris
<!-- `highlight` is not an HTML attribute --> <div highlight="true"></div> <!-- `large` is not a valid value of `width` --> <div width="large">_4Data JSON di dalam atribut data
<!-- `highlight` is not an HTML attribute --> <div highlight="true"></div> <!-- `large` is not a valid value of `width` --> <div width="large">_5Hei, kenapa tidak? . Anda dapat menarik data itu dan menguraikannya sesuai kebutuhan
<!-- `highlight` is not an HTML attribute --> <div highlight="true"></div> <!-- `large` is not a valid value of `width` --> <div width="large">_6Kasus penggunaan JavaScript
Konsepnya adalah Anda dapat menggunakan atribut data untuk meletakkan informasi dalam HTML yang mungkin memerlukan akses JavaScript untuk melakukan hal-hal tertentu
Yang umum harus dilakukan dengan fungsionalitas basis data. Katakanlah Anda memiliki tombol "Suka".
<!-- `highlight` is not an HTML attribute --> <div highlight="true"></div> <!-- `large` is not a valid value of `width` --> <div width="large">_7Tombol itu bisa memiliki penangan klik di atasnya yang melakukan permintaan Ajax ke server untuk menambah jumlah suka dalam database saat diklik. Ia tahu catatan mana yang harus diperbarui karena mendapatkannya dari atribut data
Spesifikasi
- (Draf Kerja)
- (Direkomendasikan)
- (Definisi Awal)
Dukungan peramban
Data dukungan browser ini berasal dari , yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur tersebut pada versi tersebut dan yang lebih baru