先看结论：

获取Root Variable计算后的值带入到Iframe

var color1 = window.getComputedStyle(document.documentElement).getPropertyValue('--my-color1');
var iframe = document.getElementById("testIframe");
iframe.contentDocument.getElementById("contentBlock").style.backgroundColor = color1;

如此，通过该段代码就可以实现将CSS Root Variable的值传给iframe并且应用到对应的组件上。

场景

如图所示，当有些时候我们会在自己的界面上嵌入一些iframe，或者第三方插件自己会生成一个iframe，比如我遇到的情况是ckeditor的编辑框是一个自己生成的iframe.

iframe

由于为了实现主题色彩，我在系统中声明了一套CSS Root Variables，如：

:root {
  --my-color1: red;
  --my-color2: black;
}

然后当我的界面存在iframe，那么iframe所加载的界面是不存在我这套root变量的。那么在我切换主题的时候，这些内容当然也不会跟随我的主题切换。

如果iframe内容也是自己维护，那么简单，同样的root variables加载一遍，所有的style sheets使用声明的variables即可。但是当这个iframe是第三方生成的，那么这个时候我们就需要采取一些手段来达到样式的统一。

方法

我们的核心办法就是通过 javascript 提取出 root variables 的值，然后在 iframe 内再通过 javascript 读取到的值动态修改样式。

核心

1. window.getComputedStyle()

MDN的表述：

Window.getComputedStyle() 方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有 CSS 属性的值。私有的 CSS 属性值可以通过对象提供的 API 或通过简单地使用 CSS 属性名称进行索引来访问。

2. CSSStyleDeclaration.getPropertyValue()

MDN的表述：

CSSStyleDeclaration.getPropertyValue() 接口返回一个 DOMString ，其中包含请求的 CSS 属性的值。

实例

HTML:

<div id="testblock" style="display: block; height: 200px; width: 300px; overflow: auto; padding: 8px; background: var(--my-color1)">
</div>

JS:

var elem = document.getElementById("testblock");
var color = window.getComputedStyle(elem).getPropertyValue("background-color");

结果如图：

getComputedStyle() getPropertyValue getComputedStyle + getPropertyValue