我使用CSS counter和content属性生成标题和图的编号:
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:
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’ …)
treeWalker
nodeValue
我找不到任何接口来访问真实的实时价值。[柜台]
是的 我不认为有一个。抱歉。
我唯一想到的就是遍历文档中该元素之前的每个元素(包括其:before/ :after伪元素),查找计数器并累加多少。
: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); } } } } };