需求：在父容器中获取页面中iframe标签中的div元素并改变样式 效果图如下：
其实实现起来也特别的简单 需要注意的是： 等页面加载完成在去找iframe中的元素才能找到，完整代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> 外面的div </div> <div> <iframe src="./iframe.html"> </iframe> </div> <script> window.onload = function(){ let ifr = document.querySelector("iframe"); // ifr.contentDocument 获取的是iframe中的document ifr.contentDocument.querySelector('div').setAttribute('style','color: red;'); } </script> </body> </html>iframe.html如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> iframe中的div <p> iframe中的p</p> <p> iframe中的p</p> </div> </body> </html>