如何将 css 应用于 iframe 内容?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/3714880/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to apply css to iframe content?
提问by boruchsiper
I am unable to get CSS generated content to work for iframe
elements:
我无法让 CSS 生成的内容适用于iframe
元素:
iframe::after {content: 'example';}
iframe::before {content: 'example';}
Does anyone have a solution that actuallyworks? Thanks in advance.
有没有人有实际可行的解决方案?提前致谢。
回答by Robert
You can use jQuery's .content()
function to access it.
您可以使用 jQuery 的.content()
函数来访问它。
$('yourIframe').contents().find('#yourItemYouWantToChange').css({
opacity: 0,
color: 'purple'
});
Example
例子
Here's an example showing me applying css to the jQuery logo typically found in the top left of the screen. Mind you, it has to be same domain/ports etc, so that's why my example features jsfiddle in the iframe.
http://jsfiddle.net/pPqGe/
这是一个示例,向我展示了如何将 css 应用于通常位于屏幕左上角的 jQuery 徽标。请注意,它必须是相同的域/端口等,这就是我的示例在 iframe 中使用 jsfiddle 的原因。
http://jsfiddle.net/pPqGe/
回答by Moses
Is the iframe dynamically created, or is it something that is mostly static (light a iframe used for lightbox effect).
iframe 是动态创建的,还是大部分是静态的(点亮用于灯箱效果的 iframe)。
If it is static, you can simply use style tags inside the iframe markup, or better yet include an external stylesheet by linking to it in the iframe markup.
如果它是静态的,您可以简单地在 iframe 标记内使用样式标签,或者更好地通过在 iframe 标记中链接到它来包含一个外部样式表。
If it is dynamic, you are best off using the jQuery JavaScript library as it is exceptionally good for handling CSS.
如果它是动态的,最好使用 jQuery JavaScript 库,因为它非常适合处理 CSS。