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;

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

编辑：深入挖掘DOM规范，我发现the DOM Level 2 Style Counter interface。这似乎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 / :after伪元素），查找计数器并累加多少有。。

显然这很可怕。如果您要尝试重现浏览器自己的counter机制，那么只需用您自己的脚本替换它就可能更容易（并且更加兼容，因为IE＆lt; = 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 在这种情况下不起作用;我认为唯一的方法是执行经典的循环，如下所述：

Answer 3

我会将您的CSS移植到Javascript，这样您就可以获得数字标题，并获得更大的浏览器覆盖率。使用jQuery你会做这样的事情：

$(function() {
  var section = 0;
  $(".section").each(function() {
    section++;
    var figure = 0;
    $(this).find("img.figure").each(function() {
      figure++;
      var s = "Fig. " + section + "." + figure;
      $(this).attr({alt:s}).after(s);
    });
  });
});

然后你可以这样做：

<div class="section">blabla <img id="foo" src="http://www.example.com/foo.jpg"></div>
<p>Lorem ipsum dolor sit amet <a href="#foo" class="figurereference">see here</a></p>

<script type="text/javascript">
  $(function() {
    $("a.figurereference").each(function() {
      var selector = $(this).attr("href");
      var $img = $(selector);
      var s = $(this).text() + " (" + $img.attr("alt") + ")";
      $(this).text(s);
    });
  });
</script>

虽然我同意使用CSS做这件事非常简洁。

Answer 4

我找不到任何可以访问真实实时值的界面。

如果你无法从window.getComputedStyle获得价值，那么这似乎是不可能的。

更重要的是，虽然它可以做到，但我认为这可能会滥用CSS，因为此时你打破了内容和演示之间的障碍。

查看此相关问题What are good uses of css “Content” property?

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

4 个答案: