Geek Answers Handbook

Get the background color of the css class applied to an element

Let's say I have the following CSS class:

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

and in my HTML I have a table in which some lines have this class, for example:

 <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 through JavaScript I have events that listen to td clicks and I want to get the color of the string (I know I can get the class of the string, 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 do not apply to the excel file, if they belong to the 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 the jQuery plugin that we created, but is still ongoing, but when we are pretty sure about this, we will publish it for the public.

- Update-- Here is an update on this topic, in fact it was a pure JavaScript solution, I had to dive into the jQuery source code to check this. Here's the solution:

1) indicate the desired item

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

2) get the CALCULATED STYLE of the element

 var css = window.getComputedStyle( tr );

3) get the OWN COST OF THE CALCULATED STYLE

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

From now on, I only tested on FF, Safari, Chromium and Opera on Mac, if someone could try this in IE and give us feedback that would be great.

+4
source share
2 answers

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");
+5
source

Next should do it

 $('.upComing:eq(0)').css('backgroundColor')
+2
source

More articles:


All Articles