如何读取应用的CSS计数器值？ [英] How can I read the applied CSS-counter value?

问题描述

假设您有一个CSS 2.1计数器，如

Say you have a CSS 2.1 counter like

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 嵌套计数器）

有办法阅读/获取< li id =foo> 的：before.content （本例中为2.2 c> in JavaScript？

Is there a way to read/get the :before.content ("2.2" in this case) for <li id="foo"> in JavaScript?

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

In my case a Mozilla-only solution would suffice. But there really seems to be no way to access this information. At least I didn't find any at https://developer.mozilla.org/en/CSS_Counters ff.

推荐答案

没有我能想到的，没有。 ：before伪元素不是DOM的一部分，因此没有办法解决它们的内容。

None that I can think of, no. :before pseudo-elements are not part of the DOM so there is no way to address their content.

你可以创建一个函数来扫描样式表的DOM：before规则，并制定出浏览器应用在哪里的规则，但它会是令人难以置信的凌乱。

You could make a function that scanned the stylesheet's DOM for the :before rules and worked out which rules the browser had applied where, but it would be incredibly messy.

这篇关于如何读取应用的CSS计数器值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！