Using CSS to affect div style inside iframe

ID : 10308

viewed : 31

Tags : cssiframe

Top 5 Answer for Using CSS to affect div style inside iframe

vote vote

91

You need JavaScript. It is the same as doing it in the parent page, except you must prefix your JavaScript command with the name of the iframe.

Remember, the same origin policy applies, so you can only do this to an iframe element which is coming from your own server.

I use the Prototype framework to make it easier:

frame1.$('mydiv').style.border = '1px solid #000000' 

or

frame1.$('mydiv').addClassName('withborder') 
vote vote

83

In short no.

You can not apply CSS to HTML that is loaded in an iframe, unless you have control over the page loaded in the iframe due to cross-domain resource restrictions.

vote vote

77

Yes. Take a look at this other thread for details: How to apply CSS to iframe?

var cssLink = document.createElement("link"); cssLink.href = "style.css";   cssLink.rel = "stylesheet";   cssLink.type = "text/css";   frames['frame1'].document.body.appendChild(cssLink);  
vote vote

62

You can retrieve the contents of an iframe first and then use jQuery selectors against them as usual.

$("#iframe-id").contents().find("img").attr("style","width:100%;height:100%")  $("#iframe-id").contents().find("img").addClass("fancy-zoom")  $("#iframe-id").contents().find("img").onclick(function(){ zoomit($(this)); }); 

Good Luck!

vote vote

55

The quick answer is: No, sorry.

It's not possible using just CSS. You basically need to have control over the iframe content in order to style it. There are methods using javascript or your web language of choice (which I've read a little about, but am not to familiar with myself) to insert some needed styles dynamically, but you would need direct control over the iframe content, which it sounds like you do not have.

Top 3 video Explaining Using CSS to affect div style inside iframe

Related QUESTION?