How Can I Access CSS-Generated Content and Counters Using JavaScript?

Accessing CSS-Generated Content and Counters in JavaScript

Background

When employing CSS's counter and content properties to generate numbered headers and figures on a webpage, accessing the real-time values of these counters and generated content from JavaScript may become necessary for scenarios such as adding referential links to figures.

GetComputedStyle's Limitations

While window.getComputedStyle() can provide insights into CSS properties, it falls short in this context as it retrieves the declared values from the stylesheet rather than the actual live values. For counters, there isn't even an accessible CSS property to query.

Firefox's DOM Level 2 Style Counter

An initial exploration of the DOM Level 2 Style Counter interface suggested a solution, but the problem persisted as the Counter object also lacked a property for retrieving the current counter value.

Approach One: Brute-force Algorithm

In the absence of a direct interface, one option is to manually traverse the DOM, identifying every element with counters and incrementing the count based on their occurrence. However, this approach is highly resource-intensive and prone to compatibility issues across browsers.

Approach Two: Script-Based Counters

An alternative is to replace the CSS-based counters with script-based equivalents. This involves assigning unique IDs to elements and using a custom script to traverse the document and increment counters based on element hierarchy, similar to the example code below:

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

By implementing such a script, it becomes possible to efficiently track and manipulate counters in a browser-independent manner.

The above is the detailed content of How Can I Access CSS-Generated Content and Counters Using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!