Bagaimana untuk Menggayakan Contoh Pertama Jenis Elemen dalam HTML Menggunakan CSS atau JavaScript?

Mengenal pasti Contoh Pertama Jenis Elemen Tertentu dalam Keseluruhan Dokumen

Soalan:

Bagaimana seseorang boleh menggunakan CSS atau JavaScript untuk menyasarkan dan menggayakan kejadian awal jenis elemen tertentu merentas keseluruhan dokumen HTML, tanpa mengira peletakannya dalam struktur dokumen?

Jawapan:

Penyelesaian berasaskan CSS

Malangnya, CSS sahaja tidak menyediakan fungsi untuk padankan kejadian pertama jenis elemen merentas keseluruhan dokumen. Kelas pseudo :first-of-type, mengikut spesifikasi CSS, hanya terpakai kepada adik beradik pertama jenisnya dalam elemen induknya.

Penyelesaian berasaskan JavaScript

1. :first-of-type Emulation

Menggunakan JavaScript, kita boleh mencapai fungsi ini dengan memperkenalkan kelas tersuai, "first-of-type" dan menggunakan kaedah querySelector() untuk mendapatkan padanan pertama elemen jenis yang dikehendaki. Kami kemudiannya menetapkan kelas tersuai ini kepada elemen yang diambil:

document.querySelector('p').className += ' first-of-type';

2. Fungsi Padanan Tersuai

Kami juga boleh membangunkan fungsi JavaScript tersuai untuk mengenal pasti dan menggayakan kejadian pertama jenis elemen tertentu:

function nthIndexOfType(element, index) {
  var siblings = element.parentElement.children;
  var count = 1;
  for (var i = 0; i < siblings.length; i++) {
    if (siblings[i].tagName === element.tagName) {
      if (count === index) {
        return siblings[i];
      }
      count++;
    }
  }
  return null;
}

nthIndexOfType(document.querySelector('p'), 1).style.backgroundColor = 'pink';

Fungsi ini menerima dua parameter: elemen kita hendak cari dan indeks kejadian yang ingin kita sasarkan. Ia berulang melalui semua elemen adik-beradik dan mengembalikan elemen pertama jenis yang ditentukan, menggunakan penggayaan yang diingini.

Atas ialah kandungan terperinci Bagaimana untuk Menggayakan Contoh Pertama Jenis Elemen dalam HTML Menggunakan CSS atau JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!