Bagaimana untuk Mengakses Nilai Kaunter CSS dalam JavaScript?

Cara Mengakses Kandungan Dijana CSS dalam JavaScript

Masalah:

Dalam CSS, sifat pembilang dan kandungan menjana kandungan tersuai, seperti penomboran angka ("Gamb. 1.1") untuk imej. Timbul persoalan: bagaimanakah kandungan ini boleh diakses secara pengaturcaraan menggunakan JavaScript?

Jawapan:

Mengakses Nilai Kaunter Langsung

Malangnya, tiada antara muka langsung dalam JavaScript untuk mengakses nilai kaunter langsung yang dijana oleh CSS. Percubaan untuk mendapatkannya melalui getComputedStyle hanya mengembalikan nilai yang diisytiharkan dalam lembaran gaya, bukan nilai masa jalan sebenar.

Antara muka Kaunter Gaya Tahap 2 DOM, yang pada mulanya kelihatan menjanjikan, juga tidak mempunyai sifat untuk mendapatkan nilai pembilang semasa .

Alternatif Pendekatan

Memandangkan mengakses nilai kaunter langsung tidak boleh dilaksanakan, pendekatan alternatif adalah untuk meniru mekanisme kaunter penyemak imbas sendiri menggunakan JavaScript. Skrip berikut boleh digunakan:

window.onload = function () {
  // Get all counter elements
  var counters = Node_getElementsByClassName(document.body, 'counter');

  // Initialize indices
  var indices = [];
  for (var counteri = 0; counteri < counters.length; counteri++) {
    // Get counter level
    var counter = counters[counteri];
    var level = Element_getClassArgument(counter, 'level');

    // Update indices
    while (indices.length <= level) indices.push(0);
    indices[level]++;
    indices = indices.slice(level + 1);

    // Create text node for figure number
    var text = document.createTextNode('Figure ' + indices.join('.'));

    // Insert figure number before counter element
    counter.parentNode.insertBefore(text, counter.nextSibling);

    // If counter has an ID, add figure number to links
    if (counter.id !== '') {
      for (var linki = document.links.length; linki > 0; linki--) {
        var link = document.links[linki];
        if (link.hostname === location.hostname && link.pathname === location.pathname && link.search === location.search && link.hash === '#' + counter.id) {
          // Create text node for link number
          var text = document.createTextNode('(' + indices.join('.') + ')');

          // Insert link number after link
          link.parentNode.insertBefore(text, link.nextSibling);
        }
      }
    }
  }
};

Skrip ini menambah nombor angka pada tajuk dan elemen angka serta menambahkan nombor yang sepadan pada pautan yang merujuk tajuk dan angka tersebut.

Atas ialah kandungan terperinci Bagaimana untuk Mengakses Nilai Kaunter CSS dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!