Bagaimanakah Saya Boleh Mengakses Kandungan dan Kaunter Dijana CSS Menggunakan JavaScript?

Mengakses Kandungan dan Kaunter Dijana CSS dalam JavaScript

Latar Belakang

Apabila menggunakan kaunter CSS dan sifat kandungan untuk menjana pengepala dan angka bernombor pada halaman web, mengakses nilai masa nyata ini pembilang dan kandungan yang dijana daripada JavaScript mungkin diperlukan untuk senario seperti menambah pautan rujukan kepada angka.

GetComputedStyle's Limitation

Sementara window.getComputedStyle() boleh memberikan cerapan tentang CSS hartanah, ia kurang dalam konteks ini kerana ia mendapatkan semula nilai yang diisytiharkan daripada lembaran gaya dan bukannya nilai langsung sebenar. Untuk kaunter, tiada sifat CSS yang boleh diakses untuk ditanya.

Kaunter Gaya DOM Tahap 2 Firefox

Penjelajahan awal antara muka Kaunter Gaya DOM Tahap 2 mencadangkan penyelesaian, tetapi masalah itu berterusan kerana objek Kaunter juga tidak mempunyai harta untuk mendapatkan semula kaunter semasa nilai.

Pendekatan Pertama: Algoritma Brute-force

Dengan ketiadaan antara muka langsung, satu pilihan ialah melintasi DOM secara manual, mengenal pasti setiap elemen dengan pembilang dan menambah kiraan berdasarkan kejadiannya. Walau bagaimanapun, pendekatan ini sangat intensif sumber dan terdedah kepada isu keserasian merentas penyemak imbas.

Pendekatan Kedua: Kaunter Berasaskan Skrip

Alternatifnya ialah menggantikan CSS- pembilang berasaskan dengan persamaan berasaskan skrip. Ini melibatkan pemberian ID unik kepada elemen dan menggunakan skrip tersuai untuk melintasi dokumen dan pembilang kenaikan berdasarkan hierarki elemen, serupa dengan kod contoh di bawah:

function Node_getElementsByClassName(element, classNames) {
  var results = [];
  var elements;
  if (typeof element.getElementsByClassName === "function") {
    elements = element.getElementsByClassName(classNames);
    for (var i = 0, l = elements.length; i < l; ++i) {
      results.push(elements[i]);
    }
  }
  return results;
}

function Element_getClassArgument(element, argumentName) {
  var result = null;
  var className = element.getAttribute("class");
  if (className) {
    var pattern = new RegExp("(^|\s)" + argumentName + "=([^\s]+)", "i");
    var match = pattern.exec(className);
    if (match) {
      result = match[2];
    }
  }
  return result;
}

window.onload = function() {
  var counters = Node_getElementsByClassName(document.body, "counter");
  var indices = [];
  for (var counteri = 0; counteri < counters.length; counteri++) {
    var counter = counters[counteri];

    var level = Element_getClassArgument(counter, "level");
    while (indices.length <= level) {
      indices.push(0);
    }
    indices[level]++;
    indices = indices.slice(level + 1);
    var text = document.createTextNode(
      "Figure " + indices.join(".")
    );
    counter.parentNode.insertBefore(text, counter.nextSibling);

    if (counter.id !== "") {
      for (var linki = document.links.length; linki--; ) {
        var link = document.links[linki];
        if (
          link.hostname === location.hostname &&
          link.pathname === location.pathname &&
          link.search === location.search &&
          link.hash === "#" + counter.id
        ) {
          var text = document.createTextNode("(" + indices.join(".") + ")");
          link.parentNode.insertBefore(text, link.nextSibling);
        }
      }
    }
  }
};

Dengan melaksanakan skrip sedemikian, ia menjadi mungkin untuk menjejak dan memanipulasi pembilang dengan cekap dalam cara yang bebas pelayar.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengakses Kandungan dan Kaunter Dijana CSS Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!