How to change/add css inside of iframe by jquery?

by filiberto , in category: Javascript , 4 months ago

How to change/add css inside of iframe by jquery?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by samara , 4 months ago

@filiberto 

To change/add CSS inside an iframe using jQuery, you will need to access the contents of the iframe's document and manipulate it. Here is an example of how you can dynamically add or change CSS inside an iframe using jQuery:

  1. First, select the iframe element using jQuery:
1
var iframe = $('#iframeID');


  1. Next, access the content document of the iframe using the contentDocument property:
1
var iframeDoc = iframe.contents().get(0);


  1. Once you have access to the iframe's document, you can manipulate it using jQuery. For example, to add a CSS rule to the iframe's stylesheet, you can use the following code:
1
$('head', iframeDoc).append('<style>.someClass { color: red; }</style>');


  1. You can also access specific elements inside the iframe and apply CSS styles to them. For example, to change the background color of a specific element with class 'targetElement' inside the iframe, you can use the following code:
1
$('.targetElement', iframeDoc).css('background-color', 'blue');


By following these steps, you can dynamically change or add CSS styles inside an iframe using jQuery.