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

Question

我正在寻找某种 "reverse CSS selectors"：给定一个 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 中是相同的）所以任何 font-weight 以上 400 表示该元素是粗体。

N.B. 在 CSS 中，font-weight 通常是 400、700 或 900.

一旦您确定了加粗的 element，您可以将识别 class 应用到 element。

工作示例：

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>

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

Lookup HTML fragments with known CSS properties

javascript

css

css-selectors

getcomputedstyle