Comment puis-je accéder au contenu et aux compteurs générés par CSS à l'aide de JavaScript ?

Accès au contenu et aux compteurs générés par CSS en JavaScript

Contexte

Lors de l'utilisation du compteur CSS et propriétés de contenu pour générer des en-têtes et des chiffres numérotés sur une page Web, en accédant aux valeurs en temps réel de ces compteurs et au contenu généré à partir de JavaScript. peut devenir nécessaire pour des scénarios tels que l'ajout de liens référentiels vers des figures.

Limites de GetComputedStyle

Bien que window.getComputedStyle() puisse fournir des informations sur les propriétés CSS, il ne parvient pas à ce contexte car il récupère les valeurs déclarées de la feuille de style plutôt que les valeurs réelles en direct. Pour les compteurs, il n'y a même pas de propriété CSS accessible à interroger.

Compteur de style DOM niveau 2 de Firefox

Une première exploration de l'interface du compteur de style DOM niveau 2 a suggéré une solution, mais le problème a persisté car l'objet Counter n'avait pas non plus de propriété pour récupérer le compteur actuel. valeur.

Première approche : algorithme de force brute

En l'absence d'interface directe, une option consiste à parcourir manuellement le DOM, en identifiant chaque élément avec des compteurs et incrémentant le décompte en fonction de leur occurrence. Cependant, cette approche est très gourmande en ressources et sujette à des problèmes de compatibilité entre les navigateurs.

Approche deux : compteurs basés sur des scripts

Une alternative consiste à remplacer le CSS- compteurs basés sur des équivalents basés sur des scripts. Cela implique d'attribuer des identifiants uniques aux éléments et d'utiliser un script personnalisé pour parcourir le document et incrémenter les compteurs en fonction de la hiérarchie des éléments, similaire à l'exemple de code ci-dessous :

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

En implémentant un tel script, il devient possible de suivez et manipulez efficacement les compteurs indépendamment du navigateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!