CODEWITHSUNDEEP
javascripthtmlcss
Rsp8
Rsp8

Reputation: 135

How to return the value of a CSS color element using Javascript?

I have a PDF that I ran through PDFtoHTML to create an HTML page I can manipulate. There are multiple headlines that I'd like to select based off of a single color, rgb(0, 129, 162), because that seems to be the only discernible way to differentiate the headings from the rest of the text. There is a style element applying color to all span and div elements in the head element that applies the color.

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}

The HTML looks something like this below:

<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>

Now, I can select and return the style element of the that contains the span with

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

And that will return the style within the tag.

Within the dev tools I can see that it has a color property of rgb(0, 129, 162) and that is what I want to use to SELECT AND RETURN THE VALUE OF THE CSS COLOR PROPERTY.

Any thoughts?

Upvotes: 1

Views: 273

Answers (1)

Carr
Carr

Reputation: 2791

This could achieve what you want:

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>

Upvotes: 1

Related Questions