我要给动态取得body元素增加一些css样式,但不是不能给页面中的iframe中的body修改。怎么写
时间: 2024-05-16 22:14:11 浏览: 3
如果你要给页面中的iframe中的body修改样式,可以使用以下代码:
```javascript
// 获取iframe元素
var iframe = document.getElementById('my-iframe');
// 获取iframe中的document对象
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
// 获取iframe中的body元素
var iframeBody = iframeDoc.getElementsByTagName('body')[0];
// 给body元素添加样式
iframeBody.style.backgroundColor = 'red';
```
如果你只想给当前页面的body元素添加样式,可以使用以下代码:
```javascript
// 获取body元素
var body = document.getElementsByTagName('body')[0];
// 给body元素添加样式
body.style.backgroundColor = 'red';
```
在这两个例子中,我们都是使用JavaScript来获取元素并修改其样式。你可以根据自己的需求来修改样式属性。
相关问题
比如我要在iframe中显示百度的首页,怎么动态的用js来写代码
您可以使用以下 JavaScript 代码,在 `iframe` 中动态加载百度的首页:
```html
<iframe id="myFrame"></iframe>
<script>
var iframe = document.getElementById("myFrame");
var win = iframe.contentWindow || iframe;
win.document.write('<!DOCTYPE html><html><head><meta charset="UTF-8"><title>百度一下,你就知道</title></head><body><iframe src="https://www.baidu.com/" style="width:100%;height:100%;border:none;"></iframe></body></html>');
</script>
```
在这个示例中,我们获取了 `iframe` 元素的引用,并使用 `contentWindow` 属性获取了 `iframe` 的 `window` 对象。然后,我们使用 `document.write()` 方法向 `iframe` 中写入 HTML 代码。在这个例子中,我们嵌入了百度的首页 `iframe`,并使用 CSS 样式将其设置为 `iframe` 的大小。请注意,由于百度页面使用 HTTPS 协议,您需要将您的页面部署在 HTTPS 环境中才能在 `iframe` 中正确加载百度页面。
如何避免iframe中的body
可以通过以下方式避免在iframe中访问body:
1. 在iframe中使用JavaScript,使用parent.document.body代替document.body来获取父级文档中的body元素。
2. 在iframe中使用CSS,使用parent.document.body代替body选择器来选择父级文档中的body元素。
3. 在iframe中使用jQuery,使用parent.$('body')代替$('body')来选择父级文档中的body元素。
需要注意的是,如果父窗口和iframe中的文档源不同,由于浏览器的同源策略,可能会阻止访问父级文档中的body元素。