開發日誌：js修改iframe內的css樣式
阿新 • • 發佈：2019-01-29
<body onload="ft()"><!-- 載入完之後才能讀取完整的document物件 --> <div style="text-align: center;"> <iframe id="myFrame" name="myFrame" src="MyHtml.html" frameborder="0" scrolling="no" height="560px;" sandbox="allow-forms"></iframe> </div> <script type="text/javascript"> function ft(){ //alert(document.getElementById("myFrame").document); var deptObjs= document.getElementById("myFrame").contentWindow.document.getElementsByTagName("div"); for(var i=0;i<deptObjs.length;i++){ var tmp=deptObjs[i]; if(tmp.className=="myTest"){ //alert(tmp.style.display); tmp.style.display="none"; //alert(tmp.style.display); } } }
內嵌頁
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>MyHtml.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <style type="text/css"> .myTest {background-color:blue;font-size: 24px} </style> </head> <body> <div class="myTest" style="width: 500px;height: 100px;"> This is my HTML page. <br></div> </body> </html>