Question

使用iframe从我的网站空间调用网站，使用一个带body {background-color: #222}的css文件。

iframe src也使用此CSS文件。问题是iframe中的主体需要另一种背景颜色。

尝试

iframe>body { background-color: #other }

有任何想法或建议吗？

Answer 1

我认为iframe占据了您网站的一小部分。在这种情况下，我建议你只需使用与iframe相同大小的div加载，并为此div提供正确的背景颜色。

OR：在iframe页面的源代码中包含样式属性：

<head>
    <style>body {background-color:#COLOR}</style>
</head>

Answer 2

此问题与How to apply css to iframe content?类似。基本上你可以使用jQuery来改变iframe中的CSS属性

$('#yourIframe').contents().find('body').css({
    background-color: '#333333'
});

修改您可能需要在iframe加载时添加：

$('#yourIframe').load(function(){ $(this).contents().find('body').css({ background-color: '#333333' }); });

Answer 3

请记住，Javascript只能修改具有相同网站来源的iframe属性，否则您将收到安全错误。

协议，域和端口必须匹配。

Answer 4

我用过这个，它对我有用。（而且太容易了！）

你的CSS文件中的

：

iframe {background-color：orange; }

只需将“橙色”更改为您需要的任何颜色即可。多数民众赞成！

享受！

Answer 5

在iframe包含的页面中，链接另一个样式表，然后更改您希望的所有CSS样式。

Answer 6

使用Javascript我们可以为Iframe添加背景颜色

 var x = document.getElementById("myframe");
    var y = (x.contentWindow || x.contentDocument);
    if (y.document)y = y.document;
    y.body.style.backgroundColor = "red";

参考w3schools

使用一个css文件更改iframe中的正文背景颜色

6 个答案: