是否有可能改变一个div的风格,居住在一个iframe在页面上使用CSS只?
当前回答
你需要JavaScript。这与在父页面中执行相同,只是必须在JavaScript命令前加上iframe的名称。
请记住,应用同源策略,因此只能对来自您自己服务器的iframe元素执行此操作。
我使用Prototype框架来简化:
frame1.$('mydiv').style.border = '1px solid #000000'
or
frame1.$('mydiv').addClassName('withborder')
其他回答
简而言之,没有。
您不能将CSS应用于iframe中加载的HTML,除非由于跨域资源限制,您可以控制iframe中加载的页面。
您可以先检索iframe的内容,然后像往常一样对它们使用jQuery选择器。
$("#iframe-id").contents().find("img").attr("style","width:100%;height:100%")
$("#iframe-id").contents().find("img").addClass("fancy-zoom")
$("#iframe-id").contents().find("img").onclick(function(){ zoomit($(this)); });
好运!
使用Jquery,等待源代码加载, 这就是我如何实现(使用角间隔,你可以使用javascript setInterval方法):
var addCssToIframe = function() {
if ($('#myIframe').contents().find("head") != undefined) {
$('#myIframe')
.contents()
.find("head")
.append(
'<link rel="stylesheet" href="app/css/iframe.css" type="text/css" />');
$interval.cancel(addCssInterval);
}
};
var addCssInterval = $interval(addCssToIframe, 500, 0, false);
结合不同的解决方案,这对我来说是有效的。
$(document).ready(function () {
$('iframe').on('load', function() {
$("iframe").contents().find("#back-link").css("display", "none");
});
});
显然,它可以通过jQuery完成:
$('iframe').load( function() {
$('iframe').contents().find("head")
.append($("<style type='text/css'> .my-class{display:none;} </style>"));
});
https://stackoverflow.com/a/13959836/1625795