开发日志：js修改iframe内的css样式

最新推荐文章于 2025-06-22 11:38:11 发布

原创最新推荐文章于 2025-06-22 11:38:11 发布 · 3.3w 阅读

1 ·

CC 4.0 BY-SA版权

javascript 同时被 3 个专栏收录

31 篇文章

订阅专栏

HTML

13 篇文章

订阅专栏

jsp

11 篇文章

订阅专栏

本文展示了一个通过JavaScript操作页面中iframe内部元素的例子。主要内容包括使用JavaScript修改iframe中特定div的显示状态，以及如何通过脚本访问并更改其样式属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>