先看結論：

獲取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