Get best of the week

Panduan lengkap untuk data- * atribut HTML

Kami sajikan kepada Anda terjemahan artikel tentang penggunaan atribut data-*. Ini adalah atribut yang dapat digunakan untuk menyimpan berbagai informasi bermanfaat dalam elemen HTML standar dengan mudah. Informasi ini, khususnya, dapat digunakan dalam JavaScript dan CSS.



Informasi Umum


Elemen HTML dapat memiliki atribut yang digunakan untuk menyelesaikan berbagai masalah - mulai dari menyediakan data hingga teknologi bantu, hingga elemen penataan.

<!--  `class`      CSS,  `role`    -->
<div class="names" role="region" aria-label="Names"></div>

Tidak disarankan untuk membuat atribut Anda sendiri, atau menerapkan atribut yang ada dengan cara yang tidak dirancang untuknya.

<!-- `highlight`   HTML--->
<div highlight="true"></div>

<!-- `large`      `width` -->
<div width="large">

Ini buruk karena banyak alasan. HTML salah dihasilkan. Dan meskipun ini mungkin tidak memiliki konsekuensi negatif yang nyata, ini membuat pengembang tidak mendapatkan perasaan hangat yang disebabkan oleh fakta bahwa ia menciptakan kode HTML yang valid. Tetapi alasan utama Anda tidak harus melakukan ini adalah karena HTML adalah bahasa yang terus berkembang. Akibatnya, jika atribut tertentu tidak digunakan dalam bahasa saat ini, ini tidak berarti bahwa tidak ada yang akan berubah di masa depan.

Benar, jika seseorang perlu menggunakan atribut seperti itu, ia memiliki cara yang sangat normal untuk melakukan ini. Ini tentang membuat atribut Anda sendiri, nama-nama yang diawali dengan awalan data-. Anda dapat dengan mudah bekerja dengan atribut-atribut ini, menerapkannya sesuai kebutuhan programmer.

Sintaksis


Kemampuan untuk membuat atribut HTML Anda sendiri dan menulis data kepada mereka bisa sangat berguna. Ini, seperti yang Anda tahu, dimungkinkan karena atribut data-*. Untuk ini atribut seperti itu dimaksudkan. Ini terlihat seperti ini:

<!--      -->
<div data-foo></div>

<!-- ...     -->
<div data-size="large"></div>

<!--      HTML,    HTML-, , ,      -->
<li data-prefix="Careful with HTML in here."><li>

<!--   -      -->
<aside data-some-long-attribute-name><aside>

Atribut-atribut ini, justru karena mereka selalu mulai dengan awalan data-, sering disebut atribut data-*atau atribut data. Saat membentuk nama-nama atribut ini, kata yang muncul lebih dulu data, lalu tanda hubung ( -), dan kemudian nama lainnya, disusun sesuai kebutuhan pengembang.

Bisakah saya menggunakan atribut bernama data?


Berikut adalah contoh kode yang menggunakan atribut bernama data:

<div data=""></div>

Atribut dengan nama ini mungkin tidak akan menyakiti siapa pun, tetapi penggunaannya tidak akan memungkinkan Anda untuk menggunakan alat JavaScript, yang akan kita bahas di bawah ini. Dalam contoh ini, pengembang, pada kenyataannya, membuat atribut tertentu miliknya, yang, sebagaimana telah disebutkan, tidak direkomendasikan.

Apa yang tidak boleh Anda lakukan dengan atribut data- *


Atribut tersebut tidak boleh mengandung konten yang harus dapat diakses oleh teknologi bantu. Jika beberapa data harus terlihat pada halaman, atau harus dapat diakses untuk membaca dari layar, tidak cukup hanya dengan memasukkannya ke dalam atribut data-*. Data tersebut juga harus muncul dalam markup HTML biasa.

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

<!--      ,       ,    ... -->
<div>
  <span class="visually-hidden">Chris Coyier</span>
</div>

Berikut ini materi tentang cara menyembunyikan elemen halaman web.

Elemen penataan menggunakan atribut data- *


Di CSS, Anda dapat memilih elemen HTML berdasarkan atribut dan nilainya.

/*      ,    */
[data-size="large"] {
  padding: 2rem;
  font-size: 125%;
}

/*    , ,  -  */
button[data-type="download"] { }
.card[data-pad="extra"] { }

Ini mungkin terlihat menarik. Untuk penataan dalam HTML / CSS, kelas-kelas utamanya digunakan. Dan meskipun kelas adalah alat yang luar biasa (mereka berbeda dalam tingkat rata-rata spesifisitas, Anda dapat bekerja dengannya menggunakan metode JavaScript yang nyaman melalui properti elemen classList), sebuah elemen dapat memiliki atau tidak memiliki kelas tertentu (yaitu, kelas dalam elemen tersebut “termasuk” , atau "tidak aktif"). Saat menggunakan atribut data-*, pengembang juga memiliki peluang kelas ("on / off") dan kemampuan untuk memilih elemen berdasarkan nilai atribut yang ia miliki pada tingkat spesifisitas yang sama.

/*  ,      */
[data-size] { }

/*  ,      */
[data-state="open"],
[aria-expanded="true"] { }

/*  " ",      ,    "3",    -   ,   3 -  "3.14" */
[data-version^="3"] { }
/*  ""   ,      -    */
[data-company*="google"] { }

Kekhususan pemilih atribut


Kekhususan penyeleksi atribut sama dengan untuk kelas. Spesifisitas sering dianggap sebagai nilai 4 bagian:

  • Gaya sejajar
  • Indo
  • Kelas dan Atribut
  • Tag

Akibatnya, jika Anda membayangkan nilai spesifisitas untuk item yang hanya bergaya menggunakan pemilih atribut, akan terlihat seperti 0, 0, 1, 0. 

Dan di sini ada pemilih lain:

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

Itu sudah akan dijelaskan dengan makna 0, 0, 2, 1. Angka tersebut 2muncul di sini karena ada class ( .card) dan atribut ([data-foo="bar"]). Dan di 1sini, karena hanya ada satu tag ( div).

Di sini, untuk membuatnya lebih jelas, versi ilustrasi dari argumen ini.


1 tag, 1 class dan 1 atribut

Untuk penyeleksi atribut, spesifisitas lebih rendah daripada untuk pengidentifikasi (ID), tetapi lebih tinggi dari untuk tag (elemen). Kekhususan mereka sama dengan kekhususan kelas.

Nilai atribut case-sensitive


Jika Anda ingin penyeleksi memilih atribut yang nilainya mungkin berisi string yang ditulis menggunakan kombinasi huruf kecil dan huruf besar yang berbeda, Anda dapat menggunakan opsi pemilih case yang tidak sensitif.

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

Perilaku ini memastikan bahwa karakter digunakan dalam pemilih i.

Tampilkan data yang disimpan dalam atribut data- *


CSS memungkinkan Anda untuk mengambil nilai atribut data-*dan menampilkannya di halaman.
 
/* <div data-emoji=":-)"> */

[data-emoji]::before {
  content: attr(data-emoji); /*  ':-)' */
  margin-right: 5px;
}

Contoh penggunaan atribut data- * untuk elemen style


Atribut data-*dapat digunakan untuk menunjukkan berapa banyak kolom yang harus dimiliki suatu gridwadah. Ini adalah kode HTML:

<div data-columns="2">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div data-columns="3">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div data-columns="4">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Berikut ini adalah CSS yang relevan:

[data-columns] {
  display: grid;
  grid-gap: 1rem;
  padding: 1rem;
  margin: 0 0 1rem 0;
}

[data-columns] > div {
  height: 100px;
  background: white;
}

[data-columns="2"] {
  background: #64B5F6;
  grid-template-columns: repeat(2, 1fr);
}

[data-columns="3"] {
  background: #9CCC65;
  grid-template-columns: repeat(3, 1fr);
}

[data-columns="4"] {
  background: #FFB74D;
  grid-template-columns: repeat(4, 1fr);
}

Dan ini adalah bagian dari halaman yang dihasilkan.


Wadah kisi, yang dikonfigurasi menggunakan atribut data- *. Anda dapat melakukan

percobaan dengan contoh inipada CodePen.

Bekerja dengan atribut data- * dalam JavaScript


Nilai atribut data-*dapat diakses, seperti nilai atribut lainnya, menggunakan metode getAtributeuntuk membaca data dan metode setAttributeuntuk menulis.

//   
let value = el.getAttribute("data-state");

//   .

//  data-state   "collapsed"
el.setAttribute("data-state", "collapsed");

Namun, atribut data-*memiliki API khusus mereka sendiri. Misalkan kita memiliki elemen dengan beberapa atribut data-*(yang sepenuhnya normal):

<span 
  data-info="123" 
  data-index="2" 
  data-prefix="Dr. "
  data-emoji-icon=":-)"
></span>

Jika ada tautan ke elemen ini, maka Anda dapat membaca dan menulis nilai atributnya sebagai berikut:

// 
span.dataset.info; // 123
span.dataset.index; // 2

// 
span.dataset.prefix = "Mr. ";
span.dataset.emojiIcon = ";-)";

Perhatikan bahwa baris terakhir dari kode JS menggunakan entri nama atribut style CamelCase. Sistem secara otomatis mengkonversi nama-nama atribut HTML yang ditulis dalam gaya kebab ke nama-nama yang ditulis dalam gaya unta. Artinya - data-this-little-piggyberubah menjadi dataThisLittlePiggy.

Ini API, tentu saja, tidak semudah API classList , mendukung metode yang jelas seperti add, remove, toggledan replace, tapi masih lebih baik daripada tidak.

Di JavaScript, Anda bisa bekerja dengan kumpulan data yang tersemat di elemen:

<img align="center" src="spaceship.png"
  data-ship-id="324" data-shields="72%"
  onclick="pewpew(this.dataset.shipId)">
</img>
<h2><font color="#3AC1EF">JSON-   data-*</font></h2>
<ul>
  <li data-person='
    {
      "name": "Chris Coyier",
      "job": "Web Person"
    }
  '></li>
</ul>

Mengapa tidak menulis data-*data JSON ke atribut ? Bagaimanapun, ini hanyalah string yang dapat diformat sebagai data JSON yang valid (diberi tanda kutip dan banyak lagi). Jika perlu, data ini dapat diekstraksi dari atribut dan diuraikan.

const el = document.querySelector("li");

let json = el.dataset.person;
let data = JSON.parse(json);

console.log(data.name); // Chris Coyier
console.log(data.job); // Web Person

Tentang menggunakan atribut data- * dalam JavaScript


Idenya di sini adalah menggunakan atribut data-*untuk menempatkan data dalam kode HTML yang dapat diakses dari JavaScript untuk melakukan tindakan tertentu.

Implementasi umum dari skenario ini bertujuan untuk mengatur kerja dengan database. Misalkan kita memiliki tombol Like:

<button data-id="435432343">Like</button>

Tombol ini mungkin memiliki pengendali klik yang mengeksekusi permintaan AJAX ke server. Pawang, jika pengguna menyukai sesuatu menggunakan tombol, meningkatkan jumlah suka di database server. Pawang tahu catatan mana yang perlu diperbarui, karena ia mengambil informasi tentang ini dari atribut data-*.

Ringkasan


Di sini , di sini dan di sini adalah standar yang terkait dengan pemilih atribut data-*. Di sini, di situs web Caniuse, Anda dapat mempelajari tentang dukungan data-*browser untuk atribut . Jika Anda belum pernah menggunakan atribut ini sebelumnya, kami berharap materi ini telah memberi Anda makanan untuk dipikirkan.

Pembaca yang budiman! Bagaimana Anda menggunakan data- * atribut HTML?

More articles:


All Articles