javascript - 查找具有已知 CSS 属性的 HTML 片段

Question

我正在寻找某种“反向 CSS 选择器”:给定一个 HTML 文档，如何查找具有特定格式的片段？例如，我想获得使用粗体文本 (font-weight: bold;) 的段列表。鉴于这份文件:

<h1>example</h1>
<p>This is <b>an example</b> with <span style="font-weight: bold">formatting</span>.
</p>

段列表将包括(例如通过 XPath 选择器给出):

• /h1[1]
• /p[1]/b[1]
• /p[1]/span[1]

Answer 1

您可以使用 javascript 循环遍历 DOM 中的所有 elements 并检查每个 element 的 font-weight:

window.getComputedStyle(myDOMElement).getPropertyValue('font-weight');

400 的字体粗细是正常的(在 CSS 中，font-weight: normal 和 font-weight: 400 是相同的)所以 400 以上的任何 font-weight 都意味着该元素是粗体。

注意 在 CSS 中，font-weight 通常是 400、700 或 900 。

一旦您确定了一个加粗的元素，您就可以将一个标识性的类应用到该元素。

工作示例:

const allDOMElements = document.querySelectorAll('*');

for (let i = 0; i < allDOMElements.length; i++) {

  let fontWeight = window.getComputedStyle(allDOMElements[i]).getPropertyValue('font-weight');

  if (fontWeight > 400) {

    allDOMElements[i].classList.add('is-bold');
  }
}

.is-bold {
  color: rgb(255, 0, 0);
}

<h1>Example</h1>
<p>This is <b>an example</b> with <span style="font-weight: bold">formatting</span>.
</p>