Using CSS to Affect Div Style Inside Iframe

edit css of elements within iframe

[...] Obviously when the webpage renders that iframe it is calling an html doc hosted somewhere. I need to know if there is a way to alter that css.

The question of how to style an element inside an iFrame has come up on StackOverflow many times before - try having a look here:

How to apply CSS to iframe?

Another post that addresses it can be seen here:

Using CSS to affect div style inside iframe

And one with a rather short explanation here:

CSS override body style for content in iframe?

Override body style for content in an iframe

An iframe is a 'hole' in your page that displays another web page inside of it. The contents of the iframe is not in any shape or form part of your parent page.

As others have stated, your options are:

• give the file that is being loaded in the iframe the necessary CSS
• if the file in the iframe is from the same domain as your parent, then you can access the DOM of the document in the iframe from the parent.

How to Edit content inside an Iframe or add styles?

Does the iframe src url belong to the same origin as the main page? Are they accessed by the same domain name?

If the main page and the iframe content share an origin

Javascript and same origin iframes

Otherwise

You'll need to change something so they share an origin. You can put the iframe content behind a proxy so it shares the main page's origin. If your main page is a dynamic site, you can add a new endpoint (e.g. /iframe), and in the request handler (on the server side) you request your iframe content and return it. Alternatively, you can use a CDN service like AWS CloudFront or Akamai to combine the main page and the iframe content domains into a single domain. You would configure it so that requests to /iframe/* are served by your-iframe-content.com/*, and all other requests are served by your main content server. Explanation for CloudFront

Trying to add css styling to iframe with JavaScript

Decided to use a different plugin since using the facebook iframe was causing some trouble. With this new plugin everything is working fine so yea.

Thanks to anyone who put effort to answering, I appreciate your help.

Is there a way to inject an external style sheet into an iframe?

Yes sure why not. They are 2 different documents.

var style = "h1{color:red}";

var iframe = document.querySelector("iframe");

var html = "<h1>hello world</h1>";
iframe.src = "data:text/html;charset=utf-8," + encodeURI(html) + "<style>" + style + "</style>";

h1 {
  color: blue;
}

iframe {
  border: 1px solid black;
}

<h1>hello world</h1>
<iframe src="" frameborder="0" class="iframe"></iframe>