问题描述
我使用 CSS 的 counter 和 content 属性生成标题和图形的编号:
I generate the numbering of my headers and figures with CSS's counter and content properties:
img.figure:after {
counter-increment: figure;
content: "Fig. " counter(section) "." counter(figure);
}
这(假定使用合适的浏览器)在任何图像后面都给出了一个很好的标签图 1.1"、图 1.2"等等.
This (appropriate browser assumed) gives a nice labelling "Fig. 1.1", "Fig. 1.2" and so on following any image.
问题: 如何从 Javascript 访问它?问题是双重的，我想访问某个计数器的当前值(在某个 DOM 节点)或 CSS 生成的内容的值(在某个 DOM 节点)或，显然，两者都是信息.
Question: How can I access this from Javascript? The question is twofold in that I'd like to access either the current value of a certain counter (at a certain DOM node) or the value of the CSS generated content (at a certain DOM node) or, obviously, both information.
背景:我想在链接中附加反向引用数字适当的数字，如下所示:
Background: I'd like to append to links back-referencing to figures the appropriate number, like this:
<a href="#fig1">see here</h>
------------------------^ " (Fig 1.1)" inserted via JS
据我所知，归结为这个问题:我可以通过getComputedStyle访问content或counter-increment:
As far as I can see, it boils down to this problem:I could access content or counter-increment via getComputedStyle:
var fig_content = window.getComputedStyle(
document.getElementById('fig-a'),
':after').content;
然而，这不是 live 值，而是在样式表中声明的值.我找不到任何接口来访问 real 实时值.在计数器的情况下，甚至没有真正的 CSS 属性可以查询.
However, this is not the live value, but the one declared in the stylesheet. I cannot find any interface to access the real live value. In the case of the counter, there isn't even a real CSS property to query.
通过深入研究 DOM 规范，我发现了 DOM Level 2 样式计数器界面.这似乎 a) 允许访问当前计数器值，b) 至少在 Firefox 中实现.但是，我不知道如何使用它.在这个 Firebug 输出之后，我目前的方法悲惨地死去了:
Digging deeper and deeper through the DOM specs, I found the DOM Level 2 Style Counter interface. This seems to a) allow access to the current counter value and b) be implemented in Firefox, at least. However, I have no idea on how to use it. My current approach died tragically after this Firebug output:
// 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"]
如果有任何想法，如何将其变为现实，我们将不胜感激.
Any idea, how this could be brought to life would be highly appreciated.
编辑 2: 显然我误解了 DOM Level 2 Style 的 Counter 对象.它也没有返回当前计数器值的属性.这使得上述方法无效.
Edit 2: Apparently I misinterpreted the Counter object of DOM Level 2 Style. It, too, has no property to return the current counter value. This makes the above approach invalid.
新方法:是否有可能通过 DOM 读取伪元素的内容?也就是说，我可以选择伪元素(想到的是 treeWalker)然后获取它的 nodeValue 吗?(如果您现在开始输入 'jQuery'，请重新考虑将该词更改为 'Sizzle'...)
New approach: Is there a possibility to read the content of a pseudo-element via the DOM? That is, can I select the pseudo-element (treeWalker comes to mind) and then get its nodeValue? (If you start to type 'jQuery' now, please reconsider to change that term into 'Sizzle'...)
推荐答案
是的.我不认为有一个.对不起.
Yeah. I don't think there is one. Sorry.
我唯一能想到的就是在文档中的元素之前遍历每个元素(包括它的 :before/:after 伪元素)，寻找计数器并加起来有多少.
The only thing I can think of would be to go through every element (including its :before/:after pseudo-elements) before the element in the document, looking for counters and adding up how many there are.
显然这很可怕.如果您要尝试重现浏览器自己的 counter 机制，将它替换为您的自己的基于脚本的计数器.例如.大致如下:
Obviously that's hideous. If you're going to try to reproduce the browser's own counter mechanism it would probably be easier (and much more compatible, given IE<=7's lack of counter/content support) to just replace it with your own script-based counters. eg. something along the lines of:
<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);
}
}
}
}
};
这篇关于如何使用 JavaScript 访问 CSS 生成的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！