Question

我有这段HTML：

<html>
  ...
  <iframe>
    #document
    <html>
      ...
      <div className='change-me'></div>
      ...
    </html>
  </iframe>
</html>

该iframe取自条纹React元素，我想访问其中的某些内容并更改其CSS。

我之前已经处理过提供可重复使用的React组件的库，并且可以轻松地在其中更改每个CSS细节。

问题：但是在这里我什么也不能改变。

.change-me { background: red } // This one doesn't work

也许这是该组件正在制作自己的html文档的事实，也许我是从错误的角度看问题...

Answer 1

普通CSS无法正常工作。您需要使用JavaScript以编程方式使用自己的类来更改元素的类，并且iFrame必须包含包含该类的CSS文件/样式

例如，您可以像这样将CSS文件添加到iframe：

var iFrame = document.getElementById("youriFrameId");
var head = iFrame.getElementsByTagName("head")[0];

var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'path/to/cssFile.css';

head.appendChild(link);

然后将您的类添加到目标元素中，如下所示：

iFrame.getElementById('targetElementId').classList.add("yourClass");

在应用程序内的html文档中访问CSS类选择器

1 个答案: