如何使用JavaScript访问CSS生成的内容

一尘不染

如何使用JavaScript访问CSS生成的内容

javascript

我使用CSS counter和content属性生成标题和图的编号：

img.figure:after {
  counter-increment: figure;
  content: "Fig. " counter(section) "." counter(figure);
}

这个（假定合适的浏览器）在任何图像之后都带有漂亮的标签“图1.1”，“图1.2”，依此类推。

问题： 如何从Javascript访问此内容？现在的问题是双重在于我想访问任一特定计数器的当前值（在某一DOM节点）或
所述CSS生成的内容的值（在某一DOM节点）或，很明显，这两个信息。

背景： 我想在链接后面附加指向数字的适当数字，如下所示：

<a href="#fig1">see here</h>
------------------------^ " (Fig 1.1)" inserted via JS

据我所看到的，把它归结为这个问题：我可以访问content或counter-increment通过getComputedStyle：

var fig_content = window.getComputedStyle(
                    document.getElementById('fig-a'),
                    ':after').content;

但是，这不是实时值，而是样式表中声明的值。我找不到任何接口来访问 真实的 实时价值。在计数器的情况下，甚至没有真正的CSS属性可查询。

编辑： 深入研究DOM规范，我发现了DOM Level 2 Style Counter接口。这似乎是：a）允许访问当前计数器值，以及b）至少在Firefox中实现。但是，我不知道如何使用它。在此Firebug输出之后，我当前的方法不幸死了：

// should return a DOM 2 Counter interface implementation...
window.getComputedStyle(fig_a_element, ':after')
      .getPropertyCSSValue("counter-increment")[0]
      .getCounterValue();

[Exception... "Modifications are not allowed for this document" code: "7"
 nsresult: "0x80530007 (NS_ERROR_DOM_NO_MODIFICATION_ALLOWED_ERR)"
 location: "http://localhost/countertest.html Line: 71"]

任何想法，如何将其变为现实将受到高度赞赏。

编辑2： 显然我误解了DOM级别2样式的Counter对象。它也没有返回当前计数器值的属性。这使得上述方法无效。

新方法：是否可以通过DOM读取伪元素的内容？也就是说，我可以选择伪元素（treeWalker想到）然后获得它nodeValue吗？（如果您现在开始输入
‘jQuery’ ，请重新考虑将其更改为 ‘Sizzle’ …）

阅读 239

2020-05-01

共1个答案

一尘不染

我找不到任何接口来访问真实的实时价值。[柜台]

是的我不认为有一个。抱歉。

我唯一想到的就是遍历文档中该元素之前的每个元素（包括其:before/ :after伪元素），查找计数器并累加多少。

显然，这很可怕。如果您要尝试重现浏览器自己的counter机制，则将其替换为您自己的基于脚本的计数器可能会更容易（并且兼容性更好，因为IE <=
7缺乏计数器/内容支持）。例如。类似于以下内容：

<a href="#prettypicture">this</a>

<div class="counter level=0">...</div>
<img id="prettypicture" class="counter level=1" alt="ooo, pretty"/>



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-->0;) {
                var link= document.links[i];
                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);
                }
            }
        }
    }
};

2020-05-01