时间戳

首页 > 解决方案 > 更改 iframe 中的 css 变量

javascript - 更改 iframe 中的 css 变量

问题描述

我遇到了以下问题。我正在使用 Angular 加载 Iframe。将 Angular 应用程序视为 A，将 Iframe 视为 B。我在 A 中加载 B。我使用 css 变量在 B 上设置颜色。在 A 上，我添加了一个颜色选择器。我想在 B 的正文中设置 A 的颜色选择器上选择的颜色。如何修改 Iframe 中 B 的主体颜色？作为参考，请考虑 WordPress 的自定义页面。我想做这样的事情

标签： javascriptcssangularsass

解决方案

你没有提供任何代码，所以我用纯 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>

您在框架 A（父）中的 javascript：

    document.getElementById('fr1').contentWindow
   .document.documentElement.style.setProperty('--the-color','blue')

这会将颜色从红色变为蓝色。

推荐阅读