如何使用JavaScript返回CSS颜色元素的值

Question

我有一个我可以通过pdftohtml跑的pdf来创建我可以操纵的HTML页面。我想从单个颜色的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}

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>

现在，我可以选择并返回包含

跨度的样式元素

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

这将返回标签中的样式。

在开发工具中，我可以看到它具有RGB的颜色属性(0，129，162(，这就是我要选择并返回CSS Color属性的值。

有什么想法？

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>