Cara Menggunakan Data HTML-* Atribut untuk JavaScript

HTML Data-* atribut digunakan untuk menyimpan data tersuai dalam elemen dan boleh diakses melalui dataset JavaScript atau kaedah GetAttribute/SetAttribute; 1. Apabila menggunakan dataset, kes-camel-case sepadan dengan camelcaseName, dan nilai-nilai adalah kedua-dua jenis rentetan; 2. 3. Menyimpan maklumat sensitif harus dielakkan, tidak mengulangi kandungan DOM yang sedia ada, menjaga nilai ringkas, dan mengaksesnya dengan unta, untuk mencapai pemisahan yang jelas HTML dan JavaScript.

HTML data-* Atribut adalah cara yang mudah dan berkesan untuk menyimpan data tersuai secara langsung dalam elemen HTML anda untuk digunakan dalam JavaScript. Mereka sempurna untuk lulus maklumat kecil dari markup ke skrip anda tanpa memerlukan fail luaran atau persediaan kompleks.

Apakah data-* atribut?

data-* atribut membolehkan anda membenamkan data tersuai ke dalam elemen. * Boleh digantikan dengan mana -mana nama yang masuk akal untuk kes penggunaan anda. Contohnya:

 <div id = "Product-123" Data-Product-ID = "123" Data-Price = "29.99" Data-in-stock = "True">
  Widget premium
</div>

Atribut ini sah HTML5 dan tidak menjejaskan gaya atau susun atur. Mereka juga boleh diakses melalui JavaScript dan CSS, menjadikannya sesuai untuk meningkatkan interaksi.

Mengakses atribut data dengan JavaScript

Anda boleh membaca, menulis, dan mengalih keluar atribut data-* menggunakan javascript melalui kaedah dataset atau kaedah getAttribute() / setAttribute() .

Menggunakan harta dataset (disyorkan)

Hartanah dataset menyediakan cara yang mudah untuk mengakses data-* atribut. Peraturan utama: data-camel-case-name menjadi camelCaseName dalam JavaScript.

 const element = document.getElementById ('Product-123');

// Nilai membaca
console.log (element.dataset.productId); // "123"
console.log (element.dataset.price); // "29.99"
console.log (element.dataset.instock); // "Benar"

// Menetapkan nilai
element.dataset.discount = '10%';

// Hasil html:
// data-discount = "10%"

Nota: Semua nilai adalah rentetan. Sekiranya anda memerlukan boolean atau nombor, anda perlu menukarnya:

 const instock = element.dataset.instock === 'true'; // boolean
const price = parsefloat (element.dataset.price); // nombor

Menggunakan getattribute dan setattribute

Untuk lebih banyak kawalan atau sokongan penyemak imbas yang lebih lama:

 const element = document.getElementById ('Product-123');

// membaca
const productId = element.getAttribute ('Data-Product-ID');

// menulis
element.setAttribute ('data-last-click', date.now ());

// dikeluarkan
element.removeAttribute ('data-temp-bendera');

Kaedah ini lebih verbose tetapi memberi anda kawalan penuh dan berfungsi secara konsisten di seluruh persekitaran.

Kes penggunaan biasa

1. Menyimpan konfigurasi setiap elemen

Daripada nilai hardcoding dalam JavaScript, lampirkannya ke unsur -unsur:

 <Button class = "Load-More" Data-url = "/API/Posts" Data-Page = "2" Data-Limit = "10">
  Memuat lebih banyak
</butang>

 Document.QuerySelector ('. Load-more'). AddEventListener ('klik', fungsi () {
  const url = this.dataset.url;
  const page = parseInt (this.dataset.page);

  ambil (`$ {url}? Page = $ {page}`)
    .then (/ * mengendalikan respons */)
    .finally (() => {
      this.dataset.page = Page 1;
    });
});

2. Lulus data dari pelayan ke pelanggan

Berguna dalam aplikasi yang diberikan oleh pelayan:

 <div id = "pengguna-profil" data-user-id = "<? = $ user-> id?>" data-theme = "<? = $ user-> tema?>">
</div>

Sekarang JS anda boleh mengambil tetapan khusus pengguna tanpa membuat panggilan API tambahan.

3. Penjejakan keadaan dalam komponen UI

 <div class = "dropdown" data-open = "false">
  <Button Data-Action = "Toggle"> Menu </Button>
  <ul class = "menu" tersembunyi> ... </ul>
</div>

 Document.QuerySelector ('[data-action = "toggle"]). AddEventListener (' klik ', fungsi () {
  const dropdown = this.parentElement;
  const isOpen = dropdown.dataset.open === 'true';

  dropdown.dataset.open =! isOpen;
  dropdown.QuerySelector ('. Menu'). Tersembunyi = isOpen;
});

Peraturan dan amalan terbaik

• Nama atribut mesti bermula dengan data-
• Elakkan pendua maklumat yang sudah ada di DOM (seperti kandungan teks)
• Jangan menyimpan data sensitif - apa -apa dalam html adalah awam
• Simpan nilai pendek dan mudah - Gunakan ID untuk merujuk data yang lebih besar dalam objek JS
• Gunakan Camelcase dalam JavaScript ( data-user-id → dataset.userId )

Pada asasnya, atribut data-* adalah jambatan bersih antara HTML dan JavaScript anda. Mereka menyimpan logik dalam skrip dan data dalam markup, menjadikan kod anda lebih terawat dan boleh dibaca. Tidak mencolok, tetapi sangat berguna dalam aplikasi dunia nyata.

Atas ialah kandungan terperinci Cara Menggunakan Data HTML-* Atribut untuk JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!