以角度动态更改 css 变量

2024-01-14

在我的角度项目中,我在顶层定义了一些 css 变量样式.scss像这样的文件。我在很多地方使用这些变量来保持整个主题的一致性。

:root {
  --theme-color-1: #f7f7f7;
  --theme-color-2: #ec4d3b;
  --theme-color-3: #ffc107;
  --theme-color-4: #686250;

  --font-weight: 300
}

如何动态更新这些变量的值应用程序组件.ts?什么是干净的方式以角度来做这件事?


您可以使用更新它们

 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 标签

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

以角度动态更改 css 变量 的相关文章

  • 如何为 TBODY 应用垂直滚动条

    我的表中有 4 列和 5 行数据 我必须为 TBODY 应用垂直滚动条 TH 标题内容不应滚动 我对场景进行了编码 并且在我将滚动类应用于 TBODY 之前它工作正常 一旦我将滚动样式类应用于 TBODY 它就会破坏之前的对齐方式 任何人都
  • 在 *ngFor 循环内使用 Angular i18n 和 Angular 5

    我想在模板中的 ngFor Loop 内使用动态翻译 如下所示
  • 水平对齐输入字段

    我正在尝试获取一个输入字段 并且它与同一水平线上的关联提交按钮相关 但事实证明这是一个挑战 这是我的代码
  • 如何设置 CSS 网格的最大高度

    我有以下 CSS 网格 grid 3x4 display grid grid template columns 1fr 1fr 1fr grid template rows 1fr 1fr 1fr 1fr grid template are
  • 我的 CSS 未在 Internet Explorer 11 和 Firefox 中加载!仅适用于 Chrome

    我正在创建一个简单的网页 我的 CSS 只能在 Chrome 中使用 它在 Firefox 和 IE11 中都不起作用 这是我的 HTML h1 b u Adding a new Visitor u b h1 br div class wr
  • 将父容器扩展至 100% 高度以容纳浮动内容

    我正在为一个客户项目而苦苦挣扎 我的全部divs 没有绝对定位 height 100 for html body 和容器divs 但静态内容未达到其内容 在 910 像素处 我可以将溢出属性更改为auto 并且背景会继续向下到内容的末尾 但
  • Typescript:通用到特定类型

    我有一个通用类型 type GenericType key string prop1 string prop2 string prop3 number 我使用通用类型来帮助构建 类型检查我创建的新对象 const Obj1 GenericT
  • 设置浏览器窗口最小化的最小尺寸限制?

    有没有办法在所有浏览器中手动设置浏览器窗口的最小尺寸 你可以试试 body min width 600px 一旦视口小于 600 像素 您将得到一个水平滚动条 这仅适用于支持 min width CSS 属性的现代浏览器 我认为不可能限制用
  • 增加数字输入、CSS、HTML 上的向下和向上箭头的大小

    有没有办法利用CSS来增大数字输入框右侧的上下箭头的大小 只是向上和向下箭头 而不是整个输入框 或者至少是按比例的 看这个例子 size 36 font size 36px size 12 font size 12px
  • 根据变量值将 LESS 编译为多个 CSS 文件

    有一个指定颜色的变量variables less文件 例如 themeColor B30F55 和一个 json构成实体列表的文件 其中每个键是一个实体 ID 键的值是该实体的颜色 例如 8ab834f32 B30F55 3cc734f31
  • “同态映射类型”是什么意思?

    我在一些 TypeScript PR 中看到过 同态映射类型 这个术语 这是一个例子 https github com microsoft TypeScript pull 21919 https github com microsoft T
  • 在 Angular 中使用 Vue 组件

    我有一个用 Vue 构建的项目 我想在 Angular 应用程序中重用 Vue 应用程序中的组件 这样我就不必从头开始重建每个组件 我在medium上看到了这个教程 如何在 Angular 应用程序中使用 Vue 2 0 组件 https
  • Angular 2 链式 Promise 并传递拒绝

    应该是一个简单的问题 但是我找不到有关如何做到这一点的文档 像这样链接一个承诺 Making a promise no problem let promise new Promise resolve reject gt let data d
  • Plesk Windows 部署 Node.js

    我创建了一个以 Node js 作为后端的 Angular 项目 这是服务器文件结构 Home directory httpdocs node hm dist browser folder server folder server js p
  • 查询参数更改时,路线不会更新

    在我的应用程序中 有多个链接 其中我有一些links与相同的route但与不同的query parameters 比如说 我有这样的链接 deposits withdrawals deposits withdrawals id 1 depo
  • 如何并排放置两个

    我有两个 div 我想要并排放置的元素 如下所示 navigation content 我想要导航 div 根据需要尽可能大 但不能更大 收缩以适应行为 内容 div 然后应该填充剩余的空间 如何在不指定百分比 例如 20 80 的情况下使
  • 如何在 Angular 4 项目中使用 ActiveXObject

    我正在尝试使用 ActiveXObject 如下所示 getActiveXObject pdfCtrl return new ActiveXObject pdfCtrl checkPDF let plugin null if this ge
  • 在 angular2 中过滤数组

    我正在研究如何在 Angular2 中过滤数据数组 我研究过使用自定义管道 但我觉得这不是我想要的 因为它似乎更适合简单的表示转换 而不是过滤大量数据 数组排列如下 getLogs Array
  • Angular 4 与 Webpack 2,动态加载脚本

    我刚刚在一个项目中尝试使用 Angular 4 和 Webpack 2 我试图在 ngOnInit 期间加载一些脚本 但遇到了一些问题 问题1 我的 ngOnInit 中有以下代码 System import node modules jq
  • 我可以停止 :hover 应用于元素吗?

    假设我有一些 CSS button hover font weight bold 我怎样才能防止 hover随意应用样式 我的目标用例是当元素被禁用时 例如 使用这个 HTML

随机推荐