Wie kann ich mit JavaScript auf CSS-generierte Inhalte und Zähler zugreifen?

Zugriff auf CSS-generierte Inhalte und Zähler in JavaScript

Hintergrund

Bei Verwendung des CSS-Zählers und Inhaltseigenschaften, um nummerierte Überschriften und Abbildungen auf einer Webseite zu generieren und auf die Echtzeitwerte dieser Zähler und generierten Inhalte aus JavaScript zuzugreifen kann für Szenarien wie das Hinzufügen referenzieller Links zu Abbildungen erforderlich werden.

Einschränkungen von GetComputedStyle

window.getComputedStyle() kann zwar Einblicke in CSS-Eigenschaften liefern, greift jedoch zu kurz Dieser Kontext wird verwendet, da er die deklarierten Werte aus dem Stylesheet abruft und nicht die tatsächlichen Live-Werte. Für Zähler gibt es nicht einmal eine zugängliche CSS-Eigenschaft zum Abfragen.

Firefox's DOM Level 2 Style Counter

Eine erste Erkundung der DOM Level 2 Style Counter-Schnittstelle schlug eine Lösung vor, aber das Problem blieb bestehen, da dem Counter-Objekt auch eine Eigenschaft zum Abrufen des aktuellen Zählers fehlte Wert.

Ansatz Eins: Brute-Force-Algorithmus

In Ermangelung einer direkten Schnittstelle besteht eine Möglichkeit darin, das DOM manuell zu durchlaufen und jedes Element mit Zählern und zu identifizieren Erhöhen der Anzahl basierend auf ihrem Auftreten. Dieser Ansatz ist jedoch sehr ressourcenintensiv und anfällig für Kompatibilitätsprobleme zwischen den Browsern.

Ansatz zwei: Skriptbasierte Zähler

Eine Alternative besteht darin, die CSS- basierte Zähler mit skriptbasierten Äquivalenten. Dazu gehört die Zuweisung eindeutiger IDs zu Elementen und die Verwendung eines benutzerdefinierten Skripts zum Durchlaufen des Dokuments und zum Erhöhen von Zählern basierend auf der Elementhierarchie, ähnlich dem folgenden Beispielcode:

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

Durch die Implementierung eines solchen Skripts wird dies möglich Verfolgen und manipulieren Sie Zähler effizient und browserunabhängig.

Das obige ist der detaillierte Inhalt vonWie kann ich mit JavaScript auf CSS-generierte Inhalte und Zähler zugreifen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!