Bekerja dengan atribut pada elemen DOM

Memanipulasi atribut elemen DOM boleh menjadi rumit. Artikel ini meneroka pelbagai kaedah untuk menetapkan dan mengambil nilai atribut dalam JavaScript, dengan asumsi el adalah elemen DOM (misalnya, diperolehi melalui document.querySelector ).

Sesetengah atribut boleh diakses secara langsung sebagai sifat objek DOM. Sebagai contoh, id , title , lang , align , dan Acara Acara seperti onclick boleh ditetapkan dan diambil hanya:

 el.id; // "sejuk"
el.title = "Tajuk saya";
el.title; // "Tajuk saya";

Atribut style adalah serupa, tetapi sifatnya bersarang:

 el.style.color = "Red";
el.style.backgroundColor = "Black";

Untuk mendapatkan gaya yang dikira (bukan hanya gaya inline), gunakan window.getComputedStyle :

 let style = window.getComputStyle (EL);
gaya.color; // warna CSS yang dikira

Walau bagaimanapun, tidak semua atribut adalah warga kelas pertama. Untuk atribut seperti aria-hidden , anda mesti menggunakan setAttribute dan getAttribute :

 el.setAttribute ("Aria-Handden", True);
el.getAttribute ("Aria-Handden");

Atribut tertentu menawarkan API penolong khusus. classList menyediakan kaedah yang mudah untuk menguruskan atribut kelas:

 el.classlist.value; // "modul besar"
el.classlist.length; // 2
el.classlist.add ("Cool"); // "modul besar sejuk"
el.classlist.remove ("besar"); // "modul sejuk"
el.classlist.toggle ("besar"); // togol "besar"
el.classlist.contains ("modul"); // benar

classList juga berkelakuan seperti array, membolehkan kaedah seperti forEach .

Untuk atribut data-* , harta dataset menawarkan antara muka yang lebih mesra pengguna:

 el.dataset;
/*
{
  Aktif: "Benar",
  Penempatan: "kanan atas"
}
*/

el.dataset.active; // "Benar"
el.dataset.extrawords; // "hi" (nota penukaran unta)
el.dataset.active = "false"; // setter

Gambaran keseluruhan ini menunjukkan pelbagai cara untuk berinteraksi dengan atribut DOM, yang menonjolkan kepentingan memahami nuansa setiap pendekatan untuk manipulasi yang cekap dan betul.

Atas ialah kandungan terperinci Bekerja dengan atribut pada elemen DOM. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!