gpt4 book ai didi

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

转载 作者:IT王子 更新时间:2023-10-29 02:58:32 25 4
gpt4 key购买 nike

我使用 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

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

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

但是,这不是实时 值,而是在样式表中声明的值。我找不到任何接口(interface)来访问真实实时值。对于计数器,甚至没有真正的 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'...)

最佳答案

I cannot find any interface to access the real live value. [of the counter]

是的。我不认为有一个。对不起。

我唯一能想到的就是在文档中的元素之前遍历每个元素(包括它的 :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);
}
}
}
}
};

关于javascript - 如何使用 JavaScript 访问 CSS 生成的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2651739/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com