How to change/add CSS inside of iframe by jQuery

20,504

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');
Share:
20,504
vineet
Author by

vineet

enjoy with #Nodejs#Angularjs#Javascript#Mongo

Updated on July 09, 2022

Comments

  • vineet
    vineet almost 2 years

    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');