时间戳

首页 > 解决方案 > 在 Ionic 3 中动态改变 CSS 值

html - 在 Ionic 3 中动态改变 CSS 值

问题描述

在我的应用程序中，我有可以打开的电影详细信息，我希望详细信息的按钮与电影匹配。

例如，对于电影“回到未来”，我的数据中有colors = ["#000000","#123123"].

如果我这样做<div [ngStyle]="{'background-color': movie?.colors[0]}">，div 将是我想要的颜色。

我的问题是，在 Ionic 中，我怎样才能改变variables.scss这些颜色（当我们打开新电影时更新）？

因为我们不能用自定义css修改标签，所以我必须将它添加到 variables.scss...

标签： htmlcssangularionic-frameworkdynamic

解决方案

如果您想在运行时更新任何 css 颜色或值（如 font-size （如 sass 变量））以这种方式使用css 变量，如果它基于 css 变量（如我示例中的颜色），则可以在运行时更新任何 css 属性值，但是它可以是任何 CSS 值

考虑这个例子

样式.css

:root {
--color : red;
}

 * {
   color:var(--color)
 }

应用组件 

  colorList = ['green', 'blue'];

  updateColor(color) {
    document.documentElement.style.setProperty(`--color`, color);
  }

模板 

<button *ngFor="let c of colorList" (click)="updateColor(c)">{{c}}</button>

stackblitz 演示

sass 变量将在构建时编译为那里的值，因此它们在运行时不可重用

推荐阅读