相关疑难解决方法(0)

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

我使用CSS countercontent属性生成标题和数字的编号:

img.figure:after {
  counter-increment: figure;
  content: "Fig. " counter(section) "." counter(figure);
}
Run Code Online (Sandbox Code Playgroud)

这个(适当的浏览器假设)给出了一个很好的标签"图1.1","图1.2"等等跟随任何图像.

问题:如何从Javascript访问它?现在的问题是在该双重我想访问任一特定计数器(在一定的DOM节点)的当前值所述CSS生成的内容的值(在某一DOM节点),很明显,这两个信息.

背景:我想附加链接反向引用数字相应的数字,如下所示:

<a href="#fig1">see here</h>
------------------------^ " (Fig 1.1)" inserted via JS
Run Code Online (Sandbox Code Playgroud)

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

var fig_content = window.getComputedStyle(
                    document.getElementById('fig-a'),
                    ':after').content;
Run Code Online (Sandbox Code Playgroud)

但是,这不是实时值,而是样式表中声明的值.我找不到任何接口来访问真实的实时值.在计数器的情况下,甚至没有真正的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 …
Run Code Online (Sandbox Code Playgroud)

javascript css counter dom

54
推荐指数
2
解决办法
1万
查看次数

标签 统计

counter ×1

css ×1

dom ×1

javascript ×1