📅 最后修改于: 2023-12-03 14:53:01.676000 🧑 作者: Mango
在 Web 开发中，我们经常需要在页面中嵌入其他网页或文档，这时候就需要使用 iframe 元素。但是，由于 iframe 是一个独立的文档区域，如果要对其应用 CSS 样式，需要注意一些问题。
要在 iframe 中使用外部 CSS 样式表，可以在 iframe 的文档中使用 link 标签引入样式表。示例代码如下：
<iframe src="example.html"></iframe>
<!-- example.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Hello world!</p>
</body>
</html>
在上面的示例中，我们在 iframe 的文档头部引入了一个外部样式表 style.css。这样，样式表中定义的样式就可以应用到 iframe 中的元素上了。
如果需要在父文档中应用样式到 iframe 中的元素上，需要注意跨域问题。如果 iframe 中的文档与父文档的来源不同，父文档将无法修改 iframe 中的样式。
但是，如果 iframe 内文档的来源与父文档相同，在父文档中可以通过 JavaScript 修改 iframe 的样式。示例代码如下：
<iframe id="myFrame" src="example.html"></iframe>
<button onclick="setIframeStyle()">Set iframe style</button>
<script>
function setIframeStyle() {
var iframe = document.getElementById("myFrame");
var content = iframe.contentDocument;
var p = content.body.querySelector("p");
p.style.color = "red";
}
</script>
在上面的示例中，我们在父文档中创建了一个 iframe 和一个按钮。当按钮被点击时，通过 JavaScript 修改 iframe 中的 p 元素的样式。
需要注意的是，这里使用了 iframe 的 contentDocument 属性来获取其内部文档对象，然后通过其 querySelector 方法获取 p 元素，在修改其样式。
在使用 iframe 时，需要注意跨域问题和样式的应用。如果需要在父文档中修改 iframe 的样式，可以使用 JavaScript 和 contentDocument 对象。同时，还应该注意样式表的引入方式和选择器的兼容性。