7

Say, I have the following CSS class:

.upComing{ background:#ccc; font-weight:bold; }

and in my HTML I have a table which some rows have that class applied, like so:

<table>
  <tr> <td></td> <td></td> </tr>
  <tr> <td></td> <td></td> </tr>
  <tr class='upComing'> <td></td> <td></td> </tr>
  <tr> <td></td> <td></td> </tr>
  <tr class='upComing'> <td></td> <td></td> </tr>
</table>

so far, so good, but via JavaScript I have events that listen on td clicks and I want to get the color of the row (I know I can get the class of the row, but in this case I need to be able to get the color from the class).

I need to do this because the table can be exported to an excel file and the row colors don't get applied on the excel file if they're on a CSS class, I want to apply this color to each td before sending the html to the excel generator.

PS: the table is dynamically generated from a jQuery plugin we created, it's still a work in progress, but when we feel confident enough with it we'll release it for the public.

--Update-- Here's an update on this topic, there's indeed a pure javascript solution for this, I had to take a dive into jQuery's source code to check this. Here's the solution:

1) point to the desired element

var tr = $("tr.upComing").first()[0];

2) get the COMPUTED STYLE of the element

var css = window.getComputedStyle( tr );

3) get the PROPERTY VALUE of the COMPUTED STYLE

var color = css.getPropertyValue( "background-color" );

As of this moment I've only tested in FF, Safari, Chromium and Opera on a Mac, if someone could try this on IE and give us feedback that'll be grand.

David Starkey
  • 1,840
  • 3
  • 32
  • 48
Sam Ccp
  • 1,102
  • 3
  • 12
  • 19
  • Essentially a duplicate of http://stackoverflow.com/questions/3319/css-background-color-in-javascript. You can use the same syntax to get the value. – Aaron Kurtzhals Dec 20 '12 at 20:47
  • Thanks Aaron, i think it's not a real duplicate since that question is about setting the background ( inline ), this question is about getting the background applied to an element from a css class. Anyway, thanks for the shout. – Sam Ccp Dec 20 '12 at 21:09
  • Here's an update on this topic, there's indeed a pure javascript solution for this, I had to take a dive into jquery's source code to check this. Here's the solution, 1) point to the desired element var tr = $("tr.upComing").first()[0]; 2) get the COMPUTED STYLE of the element var css = window.getComputedStyle( tr ) ; 3) get the PROPERTY VALUE of the COMPUTED STYLE var color = css.getPropertyValue( "background-color" ); as of this moment i've only tested in FF, Safari, Chromium and Opera on a Mac, if someone could try this on IE and give us feedback that'll be grand. – Sam Ccp Dec 21 '12 at 20:04
  • possible duplicate of [How do i get a computed style?](http://stackoverflow.com/questions/5910004/how-do-i-get-a-computed-style) – bfavaretto Dec 21 '12 at 20:04

3 Answers3

8

You can use the jquery CSS method to get the background color from an element: http://api.jquery.com/css/

var color = $(this).css("background-color");
MikeTedeschi
  • 583
  • 3
  • 7
  • 1
    Thanks, this works indeed, but alas, it requires using a jquery method. Even though it's a jquery plugin it's 95% or more pure js and i wanted this to be a pure js implementation, it's quite strange that the js element.style.backgroundColor gives an empty string, same as element.style.background... I'll continue investigating and maybe post a pure js solution. – Sam Ccp Dec 20 '12 at 20:56
  • @SamCcp which element are you checking? – Aaron Kurtzhals Dec 20 '12 at 21:13
  • the element i'm interested is the row (tr), two course of action, 1) user selects a bunch of rows from a checkbox in a column, those rows are bound to be sent to an excel file, i get the tr's selected from the checkboxes with element.parentNode ( where element is the td, which gives me the tr ). 2) user clicks an export button and the whole table goes to excel, the problem is that rows (tr) colored from a css class are not colored on excel, but if i paint each cell ( td ) they do get colored on excel too. – Sam Ccp Dec 20 '12 at 21:26
2

The following should do it

$('.upComing:eq(0)').css('backgroundColor')
Justin Bicknell
  • 4,804
  • 18
  • 26
  • @Asimov4 - you actually don't need to since the css function returns the style of the first matched element in the selector anyways. But using :eq(0) makes that apparent to the developer – Justin Bicknell Jun 04 '13 at 17:24
1

If it helps, I have had the same problem and found out, that in your case using:

a = document.getElementsByClassName('upcoming');
console.log(a.style.backgroundColor);

would work IF you do not use:

document.addEventListener("DOMContentLoaded", function(event) {});<

but instead refer to the js file just before the closing body tag, which is considered dirty though.

Yranna
  • 31
  • 6