Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Menggayakan Contoh Pertama Jenis Elemen dalam HTML Menggunakan CSS atau JavaScript?

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

Barbara Streisand
Lepaskan: 2024-12-09 22:46:19
asal
402 orang telah melayarinya

How to Style the First Instance of an Element Type in HTML Using CSS or 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';
Salin selepas log masuk

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';
Salin selepas log masuk

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!

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