定期更新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');