我使用 CSScounter
和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 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' ...)