CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
vineet
vineet

Reputation: 14236

How to change/add CSS inside of iframe by jQuery

I want to add css properties in a iframe div by using jQuery but it's not working.

Html Code:-

<html>
    <body>
      <iframe id='iframeId' src='api.php?abc=xyz..'>
        <html>
          <head></head>
          <body>
            <div class='change-class'> //require <div class='change-class' style='background-color:black'>
              .......

            </div>

          </body>
        </html>
      </iframe>
    </body>
</html>

JS Code:-

I try below code but doesn't get any result.

$('.change-class').css('background-color','black');
$("#iframeId").contents().find(".change-class").attr('style','background-color=black');

Upvotes: 3

Views: 24909

Answers (2)

Jai
Jai

Reputation: 74738

For this the iframe src document should also have to be on same domain to access iframe's dom nodes, if you have both pages on same domain then you can do this: 

$("#iframeId").contents().find(".change-class").css('background-color', 'black');

Upvotes: 8

guvenckardas
guvenckardas

Reputation: 738

You can find use like this way:

var iframe = $('iframe'); 
$(".change-class", iframe.contents()).addClass('border');

Upvotes: 0

Related Questions