如何读取应用的CSS计数器值?

Vol*_*erK 10 javascript css

假设您有一个CSS 2.1计数器

ol {
  counter-reset: section;
  list-style-type: none;
}
li:before {
  counter-increment: section;
  content: counters(section, ".") " ";
}


<ol>
  <li>itemA</li>          <!-- 1     -->
  <li>itemB               <!-- 2     -->
    <ol>
      <li>itemC</li>      <!-- 2.1   -->
      <li id="foo">itemD</li>      <!-- 2.2   -->
Run Code Online (Sandbox Code Playgroud)

(参见https://developer.mozilla.org/en/CSS_Counters "嵌套计数器")

有没有办法在JavaScript中读取/获取:before.content(在这种情况下为"2.2")<li id="foo">

编辑:在我的情况下,只有Mozilla的解决方案就足够了.但似乎没有办法访问这些信息.至少我没有在https://developer.mozilla.org/en/CSS_Counters ff 找到任何内容.

bob*_*nce 6

我没有想到的没有。:before伪元素不是DOM的一部分,因此无法解决它们的内容。

您可以创建一个函数,以扫描样式表的DOM中的:before规则,并确定浏览器在何处应用了哪些规则,但这会令人难以置信。