如何将CSS应用于iframe内容？

Question

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

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

有没有人有实际的解决方案？提前谢谢。

Answer 1

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

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

实施例

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

Answer 2

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

如果它是静态的，您只需在iframe标记内使用样式标记，或者通过在iframe标记中链接它来更好地包含外部样式表。

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