大家仔細看一下代碼，可以copy下來自己試驗一下，建議大家自己試一下，很快就會了。
//父頁面內容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父級頁面</title> <style> * { margin: 0; padding: 0; } div { margin: 0 auto; max-width: 800px; /*height: 500px;*/ background-color: salmon; } div span { font-size: 20px; color: black; font-weight: 900; } </style> </head> <body> <div> <span id="fufu">這是父頁面</span> <iframe id="zizi" src="zi.html" frameborder="0" scrolling="no"></iframe> </div> <script src="jquery-1.11.3.min.js"></script> <script type="text/javascript"> //父頁面調用子頁面的元素 $(function(){ $("#zizi").load(function(){ $("#zizi").contents().find("#one").css({backgroundColor:"white",color:"red"}); }); }); </script> </body> </html>
//子頁面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>子級頁面</title> <style> * { margin: 0; padding: 0; } div { width: 500px; height: 500px; /*margin: 50px auto;*/ background-color:rebeccapurple; } </style> </head> <body> <div id="one"> 這是子頁面。 </div> <script src="jquery-1.11.3.min.js"></script> <script> //子頁面調用父頁面的元素 ~function(){ var fufu = window.parent.document.getElementById('fufu'); $(fufu).css({color:'white'}); }() </script> </body> </html>
