Gee*_*hat 3 javascript css sass angular
我遇到了以下问题。我正在使用 Angular 加载 Iframe。将 Angular 应用程序视为 A,将 Iframe 视为 B。我正在 A 中加载 B。我使用 css 变量在 B 上设置颜色。在 A 上,我添加了一个颜色选择器。我想在 B 的主体中设置 A 的颜色选择器上选择的颜色。如何修改 Iframe 中 B 的主体颜色?作为参考,请考虑 WordPress 的自定义页面。我想做那样的事情
您没有提供任何代码,所以我用纯 html 和 javascript 回答。
框架B:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
:root{
--the-color:red;
}
</style>
</head>
<body>
<div style="color:var(--the-color)">
BBBB
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
你的 javascript 在框架 A(父级)中:
document.getElementById('fr1').contentWindow
.document.documentElement.style.setProperty('--the-color','blue')
Run Code Online (Sandbox Code Playgroud)
这会将颜色从红色变为蓝色。