javascript - 定期更新 iFrame 中的 CSS

Question

我的页面上有一个颜色选择器小部件。我正在尝试附加一个事件处理程序，它将采用选定的颜色并将 CSS 规则列表应用于我页面上的 iFrame。 iFrame 与我的页面位于同一域中，因此更新内联 css 不是问题。

问题是我需要在我的某些样式中使用伪类选择器(如 :hover 等)，这无法内联完成。我可以制作一个样式元素并将其附加到我的 iFrame 的头部，但这意味着每次选择新颜色时都会添加一个新元素。每次选择颜色时，有什么方法可以“替换”样式元素吗？或者，对于我的问题是否有更简单的解决方案？

Answer 1

您可以为此使用 CSS 变量。

在您的 css 文件中将您的颜色定义为“:root”:

:root{
    --myColor: red;
    --mySecondColor:green;
}

然后像这样在您的元素中设置 colorProperties:

button{
    background-color: var(--myColor);
    padding:10px;
}
div{
    color: var(--mySecondColor);
    padding:10px;
}

现在在 JavaScript 中，您可以全局更改这些属性

document.documentElement.style.setProperty('--myColor','blue');
document.documentElement.style.setProperty('--mySecondColor','orange');

或者只在本地修改

document.querySelector('button').style.setProperty('--myColor','blue');