Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Menjana Laluan CSS yang Lebih Tepat daripada Elemen DOM dalam JavaScript?

Bagaimana untuk Menjana Laluan CSS yang Lebih Tepat daripada Elemen DOM dalam JavaScript?

Mary-Kate Olsen
Lepaskan: 2024-10-25 15:09:02
asal
948 orang telah melayarinya

How to Generate More Accurate CSS Paths from DOM Elements in JavaScript?

Mencipta Laluan CSS Tepat daripada Elemen DOM

Dalam JavaScript, membina laluan CSS daripada elemen DOM ialah tugas biasa. Untuk menangani perkara ini, fungsi popular, cssPath, wujud. Walau bagaimanapun, ia sering menghasilkan laluan yang kekurangan butiran penting, seperti pemilih anak ke-n.

Kod yang disediakan menawarkan penyelesaian:

<code class="js">var cssPath = function(el) {
  if (!(el instanceof Element)) return;
  var path = [];
  while (el.nodeType === Node.ELEMENT_NODE) {
    var selector = el.nodeName.toLowerCase();
    if (el.id) {
      selector += '#' + el.id;
      path.unshift(selector);
      break;
    } else {
      var sib = el, nth = 1;
      while (sib = sib.previousElementSibling) {
        if (sib.nodeName.toLowerCase() == selector)
          nth++;
      }
      if (nth != 1)
        selector += ":nth-of-type(" + nth + ")";
    }
    path.unshift(selector);
    el = el.parentNode;
  }
  return path.join(" > ");
};</code>
Salin selepas log masuk

Penambahbaikan Terhadap Fungsi Asal:

  • Mengelakkan Keluar Pramatang: Fungsi asal berhenti apabila menemui nod bukan unsur, mengakibatkan laluan yang salah. Versi yang dipertingkatkan meneruskan traversal untuk ketepatan yang dipertingkatkan.
  • Menekankan Kejelasan: Dengan menggunakan pemilih nth-of-type() dan bukannya generik :nth-child(), laluan yang dijana menjadi lebih tepat dan boleh dibaca oleh manusia.
  • Berhenti di Elemen Ancestor dengan ID: Fungsi yang dipertingkatkan berhenti apabila ia menemui elemen nenek moyang pertama dengan ID yang ditetapkan, memperkemas laluan dan meningkatkan kebolehbacaannya.

Atas ialah kandungan terperinci Bagaimana untuk Menjana Laluan CSS yang Lebih Tepat daripada Elemen DOM dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan