Как я могу прочитать примененное значение 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

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 поддерживают.

Answer 3

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

Answer 4

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

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