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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (36)

我使用CSS countercontent属性生成我的标题和数字的编号:

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

据我所知,可以归结为这个问题:我可以访问contentcounter-increment通过getComputedStyle

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

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

提问于
用户回答回答于

我唯一能想到的就是检查每一个元素(包括它的: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);
                }
            }
        }
    }
};
用户回答回答于

读这个:

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

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

因此,getComputedStyle 在这种情况下不起作用 ; 我认为唯一的方法就是 像下面所描述的那样进行经典循环

扫码关注云+社区

领取腾讯云代金券