需求：在父容器中獲取頁面中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>