Wie kann ich mit JavaScript auf CSS-generierte Inhalte zugreifen?

Zugriff auf CSS-generierte Inhalte mit JavaScript

Innerhalb von CSS können Zähler und Inhaltseigenschaften verwendet werden, um dynamische Inhalte wie Nummerierungsüberschriften und zu generieren Figuren. Der Zugriff auf diese generierten Inhalte in JavaScript stellt jedoch Herausforderungen dar, da die Live-Werte möglicherweise nicht ohne weiteres mit Standardmethoden zugänglich sind.

Zugriff auf Zählerwerte

Ein Ansatz ist die Verwendung die DOM Level 2 Style Counter-Schnittstelle. Allerdings weist diese Methode Einschränkungen auf, wie der Fehler zeigt, der beim Versuch auftrat, mit getCounterValue() auf den Zählerwert zuzugreifen.

Zugriff auf generierte Inhalte

Eine andere Möglichkeit besteht darin Identifizieren Sie das Pseudoelement (in diesem Fall:after) und extrahieren Sie seinen Knotenwert. Allerdings kann dieser Ansatz auch unzuverlässig sein, da es keinen Standardmechanismus für den Zugriff auf Pseudoelementinhalte über das DOM gibt.

Problemumgehungen

Als Problemumgehung: a Es kann eine skriptbasierte Lösung implementiert werden, die den Zählmechanismus des Browsers simuliert. Dazu gehört das Durchlaufen des DOM, um die Anzahl der Elemente zu zählen, die den Zähler auslösen, und das Einfügen entsprechender Werte.

window.onload = function () {
    var counters = document.querySelectorAll('.counter');
    var indices = [];
    for (var i = 0; i < counters.length; i++) {
        var counter = counters[i];
        var level = parseInt(counter.getAttribute('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 j = 0; j < document.links.length; j++) {
                var link = document.links[j];
                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);
                }
            }
        }
    }
};

Dieser Ansatz ahmt das Verhalten des Browsers nach, indem die Zählerwerte explizit aktualisiert und entsprechende Beschriftungen generiert werden. Es bietet eine tragbarere und zuverlässigere Lösung, als sich auf Live-Zählerwerte zu verlassen, insbesondere in Umgebungen, in denen solche Informationen über Standard-APIs nicht zugänglich sind.

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