更改 iframe 中的元素 - CSS

在网页开发中，常常需要在一个页面中嵌入另一个页面。这时可以使用 iframe 来实现。iframe 中的元素和样式与外层页面是相互独立的。如果需要更改 iframe 中的元素，可以使用 CSS 的一些技巧。

1. 获取 iframe 中的元素

在外部页面中，可以使用 contentWindow 属性来获取 iframe 中的文档对象，然后对其中的元素进行操作。

var iframe = document.querySelector('#my-iframe');
var contentWindow = iframe.contentWindow;
var elem = contentWindow.document.querySelector('.my-class');

2. 修改 iframe 中的元素样式

可以通过 contentDocument 属性获取 iframe 中的文档对象，然后使用 CSS 修改元素样式。

var iframe = document.querySelector('#my-iframe');
var contentDocument = iframe.contentDocument;
var elem = contentDocument.querySelector('.my-class');
elem.style.backgroundColor = 'red';

3. 使用样式表修改 iframe 中的元素样式

通过 contentDocument 属性获取 iframe 中的文档对象，可以为其添加样式表。

var iframe = document.querySelector('#my-iframe');
var contentDocument = iframe.contentDocument;
var style = contentDocument.createElement('style');
style.textContent = '.my-class { background-color: red; }';
contentDocument.head.appendChild(style);

4. 注意事项

在跨域的情况下，由于浏览器的安全机制，无法直接修改 iframe 中的元素。可以考虑在 iframe 中添加一个与外部页面通信的中间页面，通过消息传递机制进行数据交互。

以上就是在 iframe 中修改元素样式的方法，希望对你有所帮助。