Adding CSS to an <iframe>

Question

I have to apply CSS to an <iframe> present in my HTML page using jQuery. The CSS must only be applied to that <iframe> and not the other parts of the HTML. Can anyone help me to do it using jQuery?

squeezemylime · Accepted Answer · 2010-11-15 05:19:44Z

1

The best way to do it using just css is to access the iFrame with an id, like this:

$('#iframe-unique-name').children().css('background-color', 'red');

This would set the background color of the elements contained within the iframe to red, for example.

answered Nov 15, 2010 at 5:19

squeezemylime

2,1023 gold badges18 silver badges26 bronze badges

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

Comments

alex · Accepted Answer · 2010-11-15 05:08:41Z

1

If the iframe's URL (src attribute) don't violate the same domain policy, you should be able to...

$('iframe').contents().find('body').css({ fontSize: '130%' });

And if it doesn't, it will be on your domain. Can you just put the CSS there in the iframe's source?

edited Nov 15, 2010 at 5:08

answered Nov 15, 2010 at 5:01

alex

492k205 gold badges891 silver badges992 bronze badges

Collectives™ on Stack Overflow

Adding CSS to an <iframe>

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related