Can I apply CSS to the elements within an iframe?

Question

I often see sites using iframes containing an external site, and a top frame containing JavaScript functionality for the user.

e.g. user analytics s

Answer 1

No, not from outside the iframe. An <iframe> is its own world. If the domains etc. match, then Javascript can communicate in and out, and could (if it wanted to) inject CSS into a child frame.

If the <iframe> contains content from a different domain, there's pretty much nothing you can do. The parent page controls the size of the frame and whether it's visible, and can put its own content over the frame by positioning etc, but it can't directly effect the way the actual frame content is rendered.

Answer 2

If it is of same domain you can interfere the iframe content using javascript as follows.. assume id of iframe is IframeId. And you want to change color of element having id "elementId".

$("iframe").load(function() {
   var frameContents;
   frameContents = $("#IframeId").contents(); 
   frameContents.find("#elementId").css("color","#fff");
});