在不修改iframe文件的情况下如何设置iframe里面的css样式

有两种解决方式：

一种是用js直接给目标元素设置样式，来更改iframe里的样式；

第二种是动态给iframe加入你设计好的css文件，通过文件里的样式来达到更改目标元素的样式。

1、用js实现

1）原生js

var ifra = document.getElementById('iframe-part');
2 ifra.contentWindow.document.getElementsByClassName('update')[0].style.display= 'none';
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里面要是有操作的话，刷新了内容区域，你加的样式就会掉；