Comment accéder aux valeurs des compteurs CSS en JavaScript ?

Comment accéder au contenu généré par CSS en JavaScript

Problème :

En CSS, Les propriétés du compteur et du contenu génèrent un contenu personnalisé, tel que la numérotation des figures (« Fig. 1.1 ») pour les images. La question se pose : comment accéder à ce contenu par programmation à l'aide de JavaScript ?

Réponse :

Accès aux valeurs du compteur en direct

Malheureusement, il n'existe pas d'interface directe en JavaScript pour accéder aux valeurs des compteurs en direct générées par CSS. Les tentatives de récupération via getComputedStyle ne renvoient que les valeurs déclarées dans la feuille de style, pas les valeurs d'exécution réelles.

L'interface DOM Level 2 Style Counter, qui semblait initialement prometteuse, manque également d'une propriété pour récupérer la valeur actuelle du compteur. .

Approche alternative

Étant donné qu'il n'est pas possible d'accéder directement aux valeurs du compteur en direct, une approche alternative consiste à reproduire le propre mécanisme de compteur du navigateur à l'aide de JavaScript. Le script suivant peut être utilisé :

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

Ce script ajoute des numéros de figure aux éléments de titre et de figure et ajoute les numéros correspondants aux liens faisant référence à ces titres et figures.

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!