How to Access CSS Counter Values in JavaScript?

How to Access CSS-Generated Content in JavaScript

Problem:

In CSS, counter and content properties generate custom content, such as figure numbering ("Fig. 1.1") for images. The question arises: how can this content be accessed programmatically using JavaScript?

Answer:

Accessing Live Counter Values

Unfortunately, there is no direct interface in JavaScript to access the live counter values generated by CSS. Attempts to retrieve them via getComputedStyle only return the values declared in the stylesheet, not the actual runtime values.

The DOM Level 2 Style Counter interface, which initially seemed promising, also lacks a property to retrieve the current counter value.

Alternative Approach

Since accessing the live counter values directly is not feasible, an alternative approach is to replicate the browser's own counter mechanism using JavaScript. The following script can be used:

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

This script adds figure numbers to heading and figure elements and appends corresponding numbers to links referencing those headings and figures.

The above is the detailed content of How to Access CSS Counter Values in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!