javascript - 如何使用 Javascript 返回 CSS 颜色元素的值？

Question

我有一个 PDF，我浏览了 PDFtoHTML创建一个我可以操作的 HTML 页面。我想根据单一颜色 rgb(0, 129, 162) 选择多个标题，因为这似乎是区分标题与文本其余部分的唯一可辨别方式。在应用颜色的 head 元素中有一个 style 元素将颜色应用于所有 span 和 div 元素。

span.cls_022{font-family:Arial,serif;font-size:11.1px;color:rgb(0, 129, 162);font-weight:normal;font-style:normal:text-decoration: none}

HTML 如下所示:

<div style="left: 72.02px; top: 204.98px; position: absolute">
  <div class="cls_022" style="left: 72.02px; top: 204.98px; position:absolute;">
    <span class="cls_022">Text I'd like to select</span>
  </div>
</div>

现在，我可以选择并返回包含 span 的样式元素

document.getElementsByClassName("cls_022")[0].style.cssText

这将返回标签内的样式。

在开发工具中，我可以看到它具有 rgb(0, 129, 162) 的颜色属性，这就是我想用来选择和返回 CSS 颜色属性的值。

有什么想法吗？

Answer 1

这可以实现你想要的:

var elem = document.getElementsByClassName("cls_022")[1];
var cssColor = window.getComputedStyle(elem, null).getPropertyValue("color");

var targetElems = document.querySelectorAll("span.cls_022");
//targetElems.forEach(el => console.log(el));
//console.log(targetElems);  //<--- If there are no spans with other color, and this is what you want, querySelectorAll return a NodeList.

let blueTitles = [];
targetElems.forEach(el => {
   if(window.getComputedStyle(el, null).getPropertyValue("color") === 'rgb(0, 129, 162)') {
       blueTitles.push(el);
   }
});

//console.log(blueTitles);  // <---- blueTitles is an array only contains spans with class "cls_022" and color rgb(0, 129, 162)

span.cls_022 {
  font-family: Arial, serif;
  font-size: 11.1px;
  color: rgb(0, 129, 162);
  font-weight: normal;
  font-style: normal:text-decoration: none
}

span.red {
    color: red;
}

<div style="left: 0px; top: 0px; position: absolute">
  <div class="cls_022" style="left: 10px; top: 10px; position:absolute;">
    <span class="cls_022">Text I'd like to select</span>
  </div>
</div>
<div style="left: 0px; top: 100px; position: absolute">
  <div class="cls_022" style="left: 10px; top: 10px; position:absolute;">
    <span class="cls_022">Multiple headlines 1</span>
  </div>
</div>
<div style="left: 0px; top: 200px; position: absolute">
  <div class="cls_022" style="left: 10px; top: 10px; position:absolute;">
    <span class="cls_022">Multiple headlines 2</span>
  </div>
</div>
<div style="left: 0px; top: 300px; position: absolute">
  <div class="cls_022" style="left: 10px; top: 10px; position:absolute; ">
    <span class="cls_022  red">Multiple headlines 3</span>
  </div>
</div>