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

Question

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?

how this is a duplicate?? I don't see any javascript in the answer/question you suggested as duplicate!!! @CD.. — Adam
– Adam, Commented Apr 3, 2018 at 18:53
I don't see how this is a duplicate question either. I'm not wanting to change the style, I need to apply logic, through JS, to capture the COLOR VALUE of the headlines. I can capture the css.text, which does not contain the color value. — Rsp8
– Rsp8, Commented Apr 3, 2018 at 19:52
I reopened because indeed the dupe was wrong, but it's not clear what you are trying to achieve. To get a computed style, use getComputedStyle(element).getPropertyValue('the_prop_to_check'), but what do you want to do with that value? Are you gonna parse all the elements on the page and check which one has this value? There must be a better way to handle it (like CSS selectors), but from your question, it's hard to tell. — Kaiido
– Kaiido, Commented Apr 4, 2018 at 9:23
I suppose it is somewhat vague. The document I'm attempting to parse has header elements with a particular blue color. I want to select those and push them into an array. The only way I can think to do this is by creating a loop to run through all elements and check logically for the color. If it matches, then push into the array. This is my first attempt really to 'parse' anything and I'm not 100% sure I'm even using the term correctly. — Rsp8
– Rsp8, Commented Apr 4, 2018 at 10:33
@RyanSpeight, maybe you could provide more html structure if you don't like this way. — Carr
– Carr, Commented Apr 4, 2018 at 11:36

Carr · Accepted Answer · 2018-04-07 06:41:18Z

1

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>

edited Apr 7, 2018 at 6:41

answered Apr 4, 2018 at 9:28

Carr

2,8012 gold badges21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rsp8 Over a year ago

I should have updated sooner but, yes, using window.getComputedStyle did, in fact, work for me. Though now, I need to figure out how to cycle through all the HTML elements and push all elements with the correct "color" attibute into an Array.

Carr Over a year ago

@Ryan Speight, that is another question, and you need to give a big picture of your project, I mean more information.

Rsp8 Over a year ago

Thanks @Carr, but you're right. It is another question and I was putting it in a statement. I will struggle with it for a while before I come back to the forums for help.

Carr Over a year ago

@RyanSpeight, I hope this matches your needs.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related