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中为:before.content读取/获取<li id="foo">（在本例中为“2.2”）？

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

Answer 1

没有我能想到的，没有。：在伪元素不是DOM的一部分之前，所以没有办法解决它们的内容。

你可以创建一个函数来扫描样式表的DOM，用于：之前的规则，并确定浏览器应用于哪些规则，但它会非常混乱。

Answer 2

我考虑过尝试获取.content值的解决方法，但即使这样也行不通，因为它尚未设置。多数民众赞成真的很震惊。我认为实际上没有任何简单的方法来获得这个价值！

你可以用一些令人作呕的Javascript来计算它，但这会让这个自动css造型出水的全部意义。

Answer 3

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

Answer 4

var x = document.getElementById("foo");
var y = document.defaultView.getComputedStyle(x, "::before").getPropertyValue(
          "counter-increment");

“：之前”为了向后兼容，如果没有，我不知道当前对“:: before”的支持。

澄清：：是伪类＆amp; CSS2.1中的元素， :: 是CSS3中的伪元素。

您可能需要使用parseInt解析数字。

不幸的是getComputedStyle是一个标准功能，这意味着MSIE不支持此功能，但FF，Chrome＆amp; Safari和Opera都可以。

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

4 个答案: