Is it possible to change the "href" of the rel="stylesheet" link of an iframe, or even change the class / style of an iFrame element?

The iFrame is not a normal element: it loads another page, which is only viewed in a session on the parent page. But outside that "window" that is just for viewing, are separate pages, as separate from each other as if they were on different tabs of the browser. And this is so on purpose, even for security reasons: imagine you have a page where the visible content is 100% an iframe, where you open a bank or e-commerce website. If the javascript from the outside page had access to the iframe data, you could capture any data typed into the forms inside it - including passwords, card numbers, etc ...

If you just need the textual information - not Javascript running on the page inside the iframe, what you can do is to retrieve, through Javascript, HTML content, with a GET request, mount the target page's DOM , and copy the desired elements into your page - then you apply the style you want. This is much more complicated, of course, and if the content of the page itself depends on javascript, it may not even be possible to do so.

It's interesting to remember that iframes and frames were elements invented in HTML before techniques such as Ajax were possible, and even before web applications with dynamic content were popular - Frames were a way to merge static pages into HTML and re-use the top and the left side of the page for navigation. Iframes remain a more or less popular way of putting another page inside a "parent" page, but can do just that: insert the other page as a whole.

    

Try this, use this script after the iframe has been uploaded

$ ('link [href="styles / report.css"]'). attr ("href", "seucss.css");