I have an iframe from a different server and I want to change the CSS inside it using jQuery

Asked Sep 12 '17 at 21:35

Active Sep 12 '17 at 21:47

Viewed 205 times

I have an iframe pulled from another server and I think the only way to alter the CSS is to load the iframe and then use jQuery to modify it.

Here is the row I need to change.

<td id="id2" class="class1 classToChange class3">Text Here</td>

I only want the change to apply to "classToChange" in the class attribute.

I want to modify "classToChange to have a different font-size and font-family.

What is the jQuery to change td.classToChange ?

It has to be something similar to this"

$("td.classToChange").attr('style', 'font-size:24px !important;');

Can anyone help ?

edited Sep 12 '17 at 21:47

asked Sep 12 '17 at 21:35

Possible duplicate of https://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe – Brian Gottier Sep 12 '17 at 22:03
I saw that post and tried it out - but the row level css overrides anything I put in the iframe. – Lisa White Barrett-Handley Sep 12 '17 at 22:08
Is the domain of the iframe the same as the one you are working on? If not, it's not possible. – Brian Gottier Sep 12 '17 at 22:09
I did think there was an issue if the iframe was on another server. I did manage to change the background color of the iframe using jQuery so some things are possible. I just thought that jQuery might be able to get around the issue by making a change after the iframe loaded and addressed the "class" directly. – Lisa White Barrett-Handley Sep 12 '17 at 22:32
If there any way to avoid using the iframe? Is this for a payment system? – Brian Gottier Sep 12 '17 at 22:36
It is a 3rd party career job posting iframe. – Lisa White Barrett-Handley Sep 13 '17 at 13:52
Brian, Thanks for the help. The company who provide the iframe gave me access to add some custom CSS to the display - so this issue is resolved. – Lisa White Barrett-Handley Sep 13 '17 at 15:12

0 Answers0