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

Question

我使用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 Level 2 Style的Counter对象.它也没有返回当前计数器值的属性.这使得上述方法无效.

新方法:是否有可能通过DOM读取伪元素的内容？也就是说,我可以选择伪元素(treeWalker想到)然后得到它nodeValue吗？(如果你现在开始输入'jQuery',请重新考虑将该术语改为'Sizzle' ......)

Answer 1

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

是啊.我不认为有一个.抱歉.

我唯一能想到的就是在文档中的元素之前遍历每个元素(包括它的:before/ :afterpseudo元素),查找计数器并添加有多少元素.

显然这很可怕.如果您要尝试重现浏览器自己的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);
                }
            }
        }
    }
};

Answer 2

读这个:

• http://www.w3.org/TR/CSS2/generate.html#propdef-content

生成的内容不会更改文档树.特别是,它不会反馈给文档语言处理器(例如,用于重新分析).

• https://developer.mozilla.org/en/CSS/Getting_Started/Content

样式表中指定的内容不会成为DOM的一部分.

所以出于这个原因,getComputedStyle 在这种情况下不起作用 ; 我认为唯一的方法是执行经典循环 ,如下所述!