在不修改iframe文件的情况下如何设置iframe里面的css样式
有两种解决方式:
一种是用js直接给目标元素设置样式,来更改iframe里的样式;
第二种是动态给iframe加入你设计好的css文件,通过文件里的样式来达到更改目标元素的样式。
1、用js实现
1)原生js
1 var ifra = document.getElementById('iframe-part'); 2 ifra.contentWindow.document.getElementsByClassName('update')[0].style.display= 'none'; 3 ifra.contentWindow.document.getElementsByClassName('redone')[0].style.display= 'none';
2)jquery
var ifra = $('#iframe-part');
ifra.contents().find('.update').css('display','none');
ifra.contents().find('.redone').css('display','none');
2、动态加入css文件
var ifra = $('#iframe-part'); ifra.contents().find('head').append( $('<link/>', { rel: 'stylesheet', href: '***.css', type: 'text/css' }) );
然后在***.css文件里设置你想要的样式就可以了
注意:动态加入css文件,无论iframe是否重构刷新,样式都不会更改;
相反js控制的样式只在控制的那个时刻起作用,ifarme里面要是有操作的话,刷新了内容区域,你加的样式就会掉;