iframe样式修改

html-css017

iframe样式修改,第1张

修改iframe内部元素样式，并且内部内容高度自适应：

<iframe srcdoc="" frameborder="0" id="demo" style="vertical-align:topwidth:80%" onload="getIframeDom()"></iframe>

function getIframeDom(){

$("#demo").contents().find("p").css('margin','0')

$("#demo").contents().find("body").css('margin','0')

changeFrameHeight()

}

window.onresize=function(){

changeFrameHeight()

}

function changeFrameHeight(){

var ifm= document.getElementById("demo")

var iheight=$("#demo").contents().find("body").height()

$("#demo").height(iheight)

}

1、iframe里的也是一个独立的网页，只有它自己的css或它引用的css才对它有效。

当然你可以在父页面用js来控制。

2、使用css可以设置百分比，如width:100%；

IFRAME 里面的内容是在IFRAME 页面中的，可以使用js精确设置。