如何在 JavaScript 中访问 CSS 计数器值？

如何在 JavaScript 中访问 CSS 生成的内容

问题：

在 CSS 中， counter 和 content 属性生成自定义内容，例如图像的图形编号（“图 1.1”）。问题出现了：如何使用 JavaScript 以编程方式访问此内容？

答案：

访问实时计数器值

不幸的是，JavaScript 中没有直接接口来访问 CSS 生成的实时计数器值。尝试通过 getCompulatedStyle 检索它们只会返回样式表中声明的值，而不是实际的运行时值。

DOM Level 2 Style Counter 接口最初看起来很有前途，但也缺少一个属性来检索当前计数器值.

替代方法

由于直接访问实时计数器值不可行，另一种方法是使用 JavaScript 复制浏览器自己的计数器机制。可以使用以下脚本：

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

此脚本将图形编号添加到标题和图形元素，并将相应的编号附加到引用这些标题和图形的链接。

以上是如何在 JavaScript 中访问 CSS 计数器值？的详细内容。更多信息请关注PHP中文网其他相关文章！