您可以使用更新它们
document.documentElement.style.setProperty('--theme-color-1', '#fff');
如果你想更新很多值,那么创建一个对象
this.styles = [
{ name: 'primary-dark-5', value: "#111" },
{ name: 'primary-dark-7_5', value: "#fff" },
];
this.styles.forEach(data => {
document.documentElement.style.setProperty(`--${data.name}`, data.value);
});
这里最主要的是document.documentElement.style.setProperty
。该行允许您访问根元素(HTML 标记)并分配/覆盖样式值。
请注意,两个地方的变量名称都应该匹配(css 和 js 文件)
如果你不想使用文档API,那么你可以直接在HTML标签上使用内联样式
const styleObject = {};
this.styles.forEach(data => {
styleObject[`--${data.name}`] = data.value;
});
然后在你的模板文件中使用 ngStyle(https://angular.io/api/common/NgStyle) https://angular.io/api/common/NgStyle
使用返回的表达式设置样式值的集合
键值对。
<some-element [ngStyle]="objExp">...</some-element>
<html [ngStyle]="styleObject" >...</html> //not sure about quotes syntax
上述方法执行相同的操作“更新根元素值”,但方式不同。
当你使用:root
,样式自动附加到 HTML 标签