如何读取应用的CSS-counter值？

Question

假设您有一个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   -->

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

有没有办法在JavaScript中读取/获取<li id="foo">的:before.content (在本例中为“2.2”)？

编辑:在我的例子中，一个仅支持Mozilla的解决方案就足够了。但似乎真的没有办法访问这些信息。至少我在https://developer.mozilla.org/en/CSS_Counters ff上没有找到。

Answer 1

据我所知没有，没有。：之前，伪元素不是DOM的一部分，因此没有办法处理它们的内容。

您可以创建一个函数来扫描样式表的DOM中的:before规则，并找出浏览器在何处应用了哪些规则，但这将非常混乱。

Answer 2

我想过一个解决办法，试图获得.content的值，但即使这样也行不通，因为它没有被设置。这真的很令人震惊。我不认为有任何简单的方法来获得这个值！

你可以用一些令人厌恶的Javascript来计算它，但这会破坏这个自动css样式的全部意义。

Answer 3

我同意其他人的观点:目前还没有办法做到这一点。因此，我建议您将基于CSS的计数器替换为基于javascript的计数器。用jQuery编写一个脚本来执行相同类型的列表项标签应该不会太难，然后您就知道插入了什么值。也许你可以保留基于CSS的编号作为后备，以防javascript在浏览器中被禁用。