如何获取伪元素:before中counter计算后的实际段落序号？

使用window.getComputedStyle(document.querySelector(Element), '::before').getPropertyValue('content')获取CSS伪元素内容时，得到的是counter(paragraph)而非页面显示的实际段落序号，如何直接获取到渲染后的数字？

相关代码如下：

HTML结构 #

<ol>
  <li>
    <p>TExttextlalalalalalalala</p>
    <p>TExttextlalalalalalalala</p>
  </li>
  <li>
    <p>TExttextlalalalalalalala</p>
    <p>TExttextlalalalalalalala</p>
  </li>
  <li>
    <p>TExttextlalalalalalalala</p>
    <p>TExttextlalalalalalalala</p>
  </li>
</ol>

CSS代码 #

li:before {
    content: counter(paragraph);
    counter-increment: paragraph;
}

补充：需求用于搜索功能，需展示结果的章节号。当前已有通过索引计算的解决方案，但希望更高效的直接获取方式：

function getVerseNumber(liElement) {
const liElements = liElement.closest('ol').querySelectorAll('li');
const verseNumber = Array.from(liElements).indexOf(liElement) + 1;
return verseNumber;}

浏览器的getComputedStyle对于CSS计数器生成的content，返回的是原始表达式而非渲染后的数值，这是DOM API的固有行为。以下是几种替代方案：

1. 优化索引计算法 #

如果不想修改CSS/HTML，可以优化现有方法的性能。比如通过遍历前序兄弟元素计数，避免全量查询列表：

function getVerseNumber(liElement) {
  let count = 1;
  let prevEl = liElement.previousElementSibling;
  while (prevEl) {
    count++;
    prevEl = prevEl.previousElementSibling;
  }
  return count;
}

这种方法在目标元素位于列表前部时，性能优于全量查询+索引查找；若列表频繁动态更新，也能保证计数准确。

2. 用CSS变量同步计数器值 #

修改CSS，将计数器值同步到自定义CSS变量，再通过getComputedStyle获取变量值：

修改后的CSS #

ol {
  counter-reset: paragraph; /* 显式重置计数器，确保起始值正确 */
}
li {
  --verse-number: counter(paragraph);
  counter-increment: paragraph;
}
li:before {
  content: var(--verse-number);
}

JS获取代码 #

function getVerseNumber(liElement) {
  const rawValue = window.getComputedStyle(liElement).getPropertyValue('--verse-number');
  // 处理部分浏览器返回的带引号字符串，比如"1"
  return parseInt(rawValue.trim().replace(/"/g, ''), 10);
}

此方法无需修改HTML，但依赖CSS变量支持（现代浏览器均兼容），需要处理返回值的引号问题。

3. HTML属性存储序号（最高效） #

如果可以控制HTML渲染逻辑，给每个<li>添加data-verse属性存储序号：

<ol>
  <li data-verse="1">...</li>
  <li data-verse="2">...</li>
  <li data-verse="3">...</li>
</ol>

然后直接通过DOM获取：

function getVerseNumber(liElement) {
  return parseInt(liElement.dataset.verse, 10);
}

这是性能最优的方案，无需计算或查询，但需要后端/模板渲染时同步赋值序号。

内容的提问来源于stack exchange，提问作者rndusr