是否可以访问由css：before规则生成的内容？ [英] Is it possible to access the content generated by a css :before rule?

问题描述

我正在尝试使用html5和 css计数器来计算文档中的数字。图编号css正在工作，但我需要能够生成包含图号的交叉引用。

有没有办法通过javascript访问这些值？我使用的计数器代码是：

  body {counter-reset：section; } 
 section {counter-reset：figure; 
 counter-increment：section; } 
 section section {counter-reset：section; } 
 section> h1：before {content：counters（section，'。'）; } 
 .figure> .caption：before {
 counter-increment：figure; 
 content：'figure'counters（section，'。'）' - 'counter（figure）; } 
 section> h1：before，.figure> .caption：before {margin-right：.5em; }              /www.w3.org/TR/CSS2/generate.html#propdef-contentrel =nofollow noreferrer>本文：
 
 
生成的内容不会更改
文档树。特别地，它是
不反馈到文档语言
处理器（例如，用于重新分析）。
 
 
换句话说，看起来好像 content  CSS属性只是在页面中添加了文本样式，而不影响文档结构。 DOM不知道这种样式，因此，Javascript无法访问它。 
 
I'm experimenting with using html5 and css counters to number the figures in a document. The figure numbering css is working, but I need to be able to generate cross reference that include the figure numbers.

Is there any way to access those values via javascript? The counter code I am using is:
body { counter-reset: section; }
section { counter-reset: figure;
          counter-increment: section; }
section section { counter-reset: section; }
section > h1:before { content: counters(section, '.'); }
.figure > .caption:before {
  counter-increment: figure;
  content: 'Figure ' counters(section, '.') '-' counter(figure); }
section > h1:before, .figure > .caption:before { margin-right: .5em; }

解决方案
According to this article:

  
Generated content does not alter the
  document tree. In particular, it is
  not fed back to the document language
  processor (e.g., for reparsing).
In other words, it appears as if the content CSS attribute merely adds text "styling" to the page, without affecting the document structure. The DOM is not aware of this styling and thus, Javascript cannot access it. 

                        
这篇关于是否可以访问由css：before规则生成的内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！