Wie greife ich in JavaScript auf CSS-Zählerwerte zu?

So greifen Sie in JavaScript auf CSS-generierte Inhalte zu

Problem:

In CSS Zähler- und Inhaltseigenschaften generieren benutzerdefinierte Inhalte, z. B. die Nummerierung von Abbildungen („Abb. 1.1“) für Bilder. Es stellt sich die Frage: Wie kann mit JavaScript programmgesteuert auf diesen Inhalt zugegriffen werden?

Antwort:

Zugriff auf Live-Zählerwerte

Leider gibt es in JavaScript keine direkte Schnittstelle, um auf die von CSS generierten Live-Zählerwerte zuzugreifen. Versuche, sie über getComputedStyle abzurufen, geben nur die im Stylesheet deklarierten Werte zurück, nicht die tatsächlichen Laufzeitwerte.

Der DOM Level 2 Style Counter-Schnittstelle, die zunächst vielversprechend erschien, fehlt auch eine Eigenschaft zum Abrufen des aktuellen Zählerwerts .

Alternativer Ansatz

Da der direkte Zugriff auf die Live-Zählerwerte nicht möglich ist Da dies nicht möglich ist, besteht ein alternativer Ansatz darin, den eigenen Zählermechanismus des Browsers mithilfe von JavaScript zu replizieren. Das folgende Skript kann verwendet werden:

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);
        }
      }
    }
  }
};

Dieses Skript fügt Abbildungsnummern zu Überschriften- und Abbildungselementen hinzu und hängt entsprechende Nummern an Links an, die auf diese Überschriften und Abbildungen verweisen.

Das obige ist der detaillierte Inhalt vonWie greife ich in JavaScript auf CSS-Zählerwerte zu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!