Как я могу прочитать примененное значение CSS-счетчика?

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 "счетчики вложенности")

Есть ли способ прочитать / получить :before.content ("2.2" в данном случае) для <li id="foo"> в JavaScript?

Изменить: В моем случае будет достаточно решения только для Mozilla. Но на самом деле, похоже, нет возможности получить доступ к этой информации. По крайней мере, я не нашел ни одного на https://developer.mozilla.org/en/CSS_Counters ff.

Answer 1

Ни о чем я не могу думать, нет.:before псевдоэлементы не являются частью DOM, поэтому нет способа обратиться к их содержимому.

Вы могли бы создать функцию, которая сканировала бы DOM таблицы стилей на предмет: before правил и выяснила, какие правила применял браузер, где, но это было бы невероятно грязно.

Answer 2

Я согласен с другими: в настоящее время нет способа сделать это. Поэтому я предлагаю вам заменить счетчики на основе CSS на счетчики на основе JavaScript. Не должно быть слишком сложно написать скрипт в jQuery для выполнения такой же маркировки элементов списка, и тогда вы будете знать, какие значения вы вставили. Возможно, вы могли бы сохранить нумерацию на основе CSS в качестве запасного варианта в случае, если в браузере отключен JavaScript.

Answer 3

Я думал об обходном пути, пытающемся получить значение.content, но даже это не работает, потому что оно не было установлено. Это действительно довольно шокирует. Я не думаю, что на самом деле есть простой способ получить это значение!

Вы можете рассчитать это с помощью какого-то отвратительного Javascript, но это взорвет весь смысл этого автоматического CSS-стиля.

Answer 4

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

":before" работает для обратной совместимости, если это не так, я не знаю текущей поддержки "::before".

Пояснение:: псевдо-класс и элементы в CSS2.1, :: псевдо-элемент в CSS3.

Возможно, вам придется разобрать номер с parseInt.

К сожалению, getComputedStyle - это стандартная функция, что означает, что MSIE не поддерживает это, но FF, Chrome & Safari и Opera поддерживают.