iframe样式修改

html-css010

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)

}

项目中需要对iframe引用的网页进行样式修改，使用js的元素查询功能进行操作，如图中希望对iframe中的ul高度进行操作

//通过contentWindow来查询iframe内部元素

如果是id选择器则值选中一个元素，直接可使用，若使用class等选择器选择的为多个元素，即使实际只有一个元素也需要遍历

此操作必须在window.onload = function(){}内进行