js控制iframe内部css样式
2018-11-07 本文已影响13人
de_self
项目中需要对iframe引用的网页进行样式修改，使用js的元素查询功能进行操作，如图中希望对iframe中的ul高度进行操作
//通过contentWindow来查询iframe内部元素
如果是id选择器则值选中一个元素，直接可使用，若使用class等选择器选择的为多个元素，即使实际只有一个元素也需要遍历
此操作必须在window.onload = function(){}内进行
iframe
<body>
<iframe src="1.html" id="aa"></iframe>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
window.onload = function(){
var ifra = document.getElementById('aa'); //选中iframe
var test = ifra.contentWindow.document.getElementsByClassName('box');
//通过contentWindow来查询iframe内部元素
for(var i=0;i<test.length;i++){
var tmp=test[i];
console.log(tmp);
tmp.style.height="20px";
}
}
</script>
