JS/JQUERY 父页面中如何修改 iframe 内部样式？

Z_Xshan

于 2023-06-15 19:16:56 发布

阅读量3.8k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript jquery 开发语言

本文介绍了通过JavaScript和jQuery来操作iframe中的元素，特别是修改样式的方法。首先获取iframe元素，然后获取其文档对象，接着可以对iframe内部的body或其他元素设置样式，如改变背景颜色。

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

可以通过以下步骤在父页面中修改 iframe 中的样式：

1.获取 iframe 元素：

var iframe = document.getElementById('myIframe');

2、获取 iframe 中的文档对象：

var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

3、修改样式：(这个可以根据你需要的元素去获取对应的id或class)

var iframeBody = iframeDoc.getElementsByTagName('body')[0];
iframeBody.style.backgroundColor = 'red';

或者使用 jQuery：

var iframe = $('#myIframe');
var iframeDoc = iframe.contents();
iframeDoc.find('body').css('background-color', 'red');