Bagaimana Anda mengatur atribut data menggunakan javascript?

Selamat datang di tutorial singkat tentang cara mengatur dan mendapatkan atribut data HTML di Javascript. Ingin memasukkan properti atau data kustom Anda sendiri ke dalam elemen HTML?

• Untuk mengatur atribut data dalam HTML, kami mendefinisikan data-KEY="VALUE" di tag awal. e. G. <div data-color="red">
• Untuk menyetel atribut data dalam Javascript, kami menyetel properti dataset. e. G. document.getElementById("ID").dataset.color = "red";
• Untuk mendapatkan atribut data dalam Javascript, kami mengakses properti dataset yang sama. e. G.

  <!-- (A) ELEMENT WITH DATA ATTRIBUTES -->
  <div id="demoB" data-color="red" data-priority="high">
    This element has custom data attributes.
  </div>
   
  <!-- (B) GET DATA ATTRIBUTE IN JAVASCRIPT -->
  <script>
  var el = document.getElementById("demoB");
  console.log(el.dataset.color); // red
  console.log(el.dataset.priority); // high
  </script>

  0

Itu mencakup dasar-dasarnya, tetapi baca terus untuk contoh lainnya

ⓘ Saya telah menyertakan file zip dengan semua kode sumber contoh di awal tutorial ini, jadi Anda tidak perlu menyalin-tempel semuanya… Atau jika Anda hanya ingin langsung masuk

TLDR – SLIDE CEPAT

Unduh & Catatan

UNDUH & CATATAN

Pertama, berikut adalah tautan unduhan ke kode contoh seperti yang dijanjikan

CATATAN CEPAT

DOWNLOAD KODE CONTOH

Klik di sini untuk mengunduh kode sumber, saya telah merilisnya di bawah lisensi MIT, jadi silakan membangun di atasnya atau menggunakannya dalam proyek Anda sendiri

DAPATKAN & SET ATRIBUT DATA

Baiklah, sekarang mari kita masuk ke contoh bagaimana bekerja dengan atribut data di Javascript

1) ATUR ATRIBUT DATA

1 set. html

<!-- (A) SET DATA ATTRIBUTE IN HTML START TAG -->
<div id="demoA" data-color="red">
  This element has custom data attributes.
</div>
 
<!-- (B) SET DATA ATTRIBUTE IN JAVASCRIPT -->
<script>
document.getElementById("demoA").dataset.priority = "high";
// <div id="demoA" data-color="red" data-priority="high">
</script>

Seperti pada pendahuluan di atas, ada 2 cara untuk mengatur atribut data HTML

1. Langsung di tag awal HTML itu sendiri data-KEY="VALUE"
2. Menggunakan Javascript

   <!-- (A) ELEMENT WITH DATA ATTRIBUTES -->
   <div id="demoB" data-color="red" data-priority="high">
     This element has custom data attributes.
   </div>
    
   <!-- (B) GET DATA ATTRIBUTE IN JAVASCRIPT -->
   <script>
   var el = document.getElementById("demoB");
   console.log(el.dataset.color); // red
   console.log(el.dataset.priority); // high
   </script>

   2

Ya, kami dapat memiliki beberapa atribut data yang dilampirkan ke satu elemen

2) DAPATKAN ATRIBUT DATA

2-dapatkan. html

<!-- (A) ELEMENT WITH DATA ATTRIBUTES -->
<div id="demoB" data-color="red" data-priority="high">
  This element has custom data attributes.
</div>
 
<!-- (B) GET DATA ATTRIBUTE IN JAVASCRIPT -->
<script>
var el = document.getElementById("demoB");
console.log(el.dataset.color); // red
console.log(el.dataset.priority); // high
</script>

Yang ini sesederhana mungkin. Kami juga dapat mengambil data menggunakan

<!-- (A) ELEMENT WITH DATA ATTRIBUTES -->
<div id="demoB" data-color="red" data-priority="high">
  This element has custom data attributes.
</div>
 
<!-- (B) GET DATA ATTRIBUTE IN JAVASCRIPT -->
<script>
var el = document.getElementById("demoB");
console.log(el.dataset.color); // red
console.log(el.dataset.priority); // high
</script>

3) SET ARRAY KE ATTRIBUT DATA

3-array. html

<!-- (A) DUMMY ELEMENT -->
<div id="demoC">Dummy</div>
 
<!-- (B) JAVASCRIPT -->
<script>
// (B1) GET HTML ELEMENT
var el = document.getElementById("demoC");

// (B2) SET ARRAY TO DATA ATTRIBUTE
// dataset can only be string - json.stringify() to turn array to string
el.dataset.array = JSON.stringify(["Red", "Green", "Blue"]);
 
// (B3) GET ARRAY BACK FROM STRING
// use json.parse() to turn encoded string back to array
console.log(JSON.parse(el.dataset.array));
</script>

Catatan singkat, atribut data HTML harus berupa string dan tidak akan menerima array/objek

• Untuk menyetel larik ke dalam atribut data, kami menggunakan

  <!-- (A) ELEMENT WITH DATA ATTRIBUTES -->
  <div id="demoB" data-color="red" data-priority="high">
    This element has custom data attributes.
  </div>
   
  <!-- (B) GET DATA ATTRIBUTE IN JAVASCRIPT -->
  <script>
  var el = document.getElementById("demoB");
  console.log(el.dataset.color); // red
  console.log(el.dataset.priority); // high
  </script>

  4 untuk menyandikan larik menjadi string terlebih dahulu
• Untuk mengambil data, kami menggunakan

  <!-- (A) ELEMENT WITH DATA ATTRIBUTES -->
  <div id="demoB" data-color="red" data-priority="high">
    This element has custom data attributes.
  </div>
   
  <!-- (B) GET DATA ATTRIBUTE IN JAVASCRIPT -->
  <script>
  var el = document.getElementById("demoB");
  console.log(el.dataset.color); // red
  console.log(el.dataset.priority); // high
  </script>

  5 untuk mengubah string kembali menjadi array

4) SIMPAN SNIPPET HTML DI ATTRIBUT DATA

4-html. html

<!-- (A) DUMMY ELEMENTS -->
<div id="demoD" data-snippet="<strong>Foo</strong>">Demo D</div>
<div id="demoE">Demo E</div>

<!-- (B) JAVASCRIPT -->
<script>
// (B1) GET HTML SNIPPET
var snippet = document.getElementById("demoD").dataset.snippet;
 
// (B2) SET HTML SNIPPET
document.getElementById("demoE").innerHTML = snippet;
</script>

Ya, kita bisa mengatur potongan HTML menjadi atribut data… Tapi pertanyaannya adalah, mengapa?

5) SET GAYA CSS BERDASARKAN ATTRIBUT DATA

5 gaya. html

<!-- (A) CSS STYLES -->
<style>
div[data-color="red"] { background: red; }
div[data-color="green"] { background: green; }
div[data-color="blue"] { background: blue; }
</style>

<!-- (B) DUMMY ELEMENT -->
<div id="demoF">Dummy</div>
 
<!-- (C) JAVASCRIPT SET COLOR -->
<script>
function setColor (col) {
  document.getElementById("demoF").dataset.color = col;
}
</script>
<input type="button" value="Red" onclick="setColor('red')">
<input type="button" value="Green" onclick="setColor('green')">
<input type="button" value="Blue" onclick="setColor('blue')">

Contoh terakhir ini adalah sedikit tambahan untuk mendemonstrasikan bagaimana CSS juga dapat digunakan untuk menargetkan atribut data yang berbeda – Agak berguna, tetapi saya pribadi masih lebih suka menggunakan kelas dan variabel CSS

BIT & LINK EKSTRA

Itu saja untuk tutorialnya, dan ini adalah bagian kecil tentang beberapa tambahan dan tautan yang mungkin berguna bagi Anda

PERIKSA KOMPATIBILITAS

• Dataset – CanIUse

Atribut data sudah didukung dengan baik di hampir setiap browser

LINK dan REFERENSI

• Menggunakan Atribut Data – MDN
• HTMLElement. kumpulan data – MDN
• Cara Menggunakan Atribut Data HTML5 – Sitepoint
• [atribut] – Trik-CSS
• Bekerja Dengan JSON – MDN

LEMBAR CHEAT INFOGRAFIS

Terima kasih telah membaca, dan kami telah sampai pada akhir. Saya harap ini membantu Anda untuk lebih memahami, dan jika Anda ingin berbagi sesuatu dengan panduan ini, jangan ragu untuk berkomentar di bawah ini. Semoga berhasil dan selamat membuat kode

Bagaimana cara menetapkan nilai atribut khusus dalam JavaScript?

Bagaimana Anda membuat atribut data?

Bagaimana cara mengatur atribut data secara dinamis dalam JavaScript?

Bagaimana cara menambahkan atribut ke input dalam JavaScript?