How can I get the background color using Javascript or jQuery?

Question

I have an iframe and I would like to set up the color white if the background is black and vice-versa. I tried to get the background color with:

$("#id").css('background')

and

$("#id").css('background-color')

and

$("#id").css('backgroundColor')

but they all return transparent.

Please help me.

if it's transparent then how do I get the parent background? — Paul Moldovan
– Paul Moldovan, Commented May 30, 2012 at 11:44
I test $("#id").css("background-color")) and return color in format rgb(255, 0, 0). — Morteza
– Morteza, Commented May 30, 2012 at 11:48
I didn't set background-color anywhere i just set background: #000000 (or other color). is it because of that? — Paul Moldovan
– Paul Moldovan, Commented May 30, 2012 at 11:51

lanzz · Accepted Answer · 2012-05-30 11:56:45Z

2

You need to be looking at the background of the iframe's body, not the background of the <iframe> element itself.

var bgcolor = $(document.getElementById('iframeId').contentWindow.document.body).css('background-color');

(won't work if iframe content is from a domain different from yours)

edited May 30, 2012 at 11:56

answered May 30, 2012 at 11:46

lanzz

43.4k12 gold badges93 silver badges99 bronze badges

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

5 Comments

Paul Moldovan Over a year ago

Uncaught ReferenceError: getElementById is not defined

lanzz Over a year ago

Apparently not one of my best days. Fixed.

Paul Moldovan Over a year ago

yeah ... the body has transparent too. But still my background is black

lanzz Over a year ago

The background color might be from some other element within the iframe. It won't be trivial to determine heuristically which element gives the background color of the content.

Paul Moldovan Over a year ago

let us continue this discussion in chat

Esailija · Accepted Answer · 2012-05-30 11:47:38Z

1

I think you can walk the parents until you get a background-color that is not transparent:

var elm = $("#id")[0],
    bg;

do {

    bg = $(elm).css( "backgroundColor" );
    elm = elm.parentNode;
} while( elm && bg.toLowerCase() === "transparent" );


console.log( bg );

answered May 30, 2012 at 11:47

Esailija

140k24 gold badges280 silver badges328 bronze badges

Collectives™ on Stack Overflow

How can I get the background color using Javascript or jQuery?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related