如何将 css 应用于 iframe 内容？ [关闭]答案

【问题标题】：How to apply css to iframe content? [closed]如何将 css 应用于 iframe 内容？ [关闭]
【发布时间】：2011-04-12 12:11:36
【问题描述】：

我无法让 CSS 生成的内容适用于 iframe 元素：

iframe::after {content: 'example';}
iframe::before {content: 'example';}

有没有人有一个实际上有效的解决方案？提前致谢。

【问题讨论】：

您需要说明为什么其他线程（例如 stackoverflow.com/questions/217776/how-to-apply-css-to-iframe ）对您来说不够好。否则人们最终会发布相同的答案。例如，您是否尝试过其他建议？

标签： css iframe

【解决方案1】：

您可以使用 jQuery 的 .content() 函数来访问它。

$('yourIframe').contents().find('#yourItemYouWantToChange').css({
    opacity: 0,
    color: 'purple'
});

示例

这是一个示例，展示了我将 css 应用于通常位于屏幕左上角的 jQuery 徽标。请注意，它必须是相同的域/端口等，这就是为什么我的示例在 iframe 中使用 jsfiddle。
http://jsfiddle.net/pPqGe/

【讨论】：

【解决方案2】：

iframe 是动态创建的，还是大部分是静态的（点亮用于灯箱效果的 iframe）。

如果它是静态的，您可以简单地在 iframe 标记中使用样式标签，或者最好通过在 iframe 标记中链接到外部样式表来包含外部样式表。

如果它是动态的，最好使用 jQuery JavaScript 库，因为它非常适合处理 CSS。

【讨论】：