在Ionic 3中动态更改CSS值

Question

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

例如，在电影“回到未来”中，我的数据中有 colors = ["＃000000"，“#123123”]。

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

我的问题是，在 Ionic 中，我如何更改 variables.scss 以拥有这些颜色（在打开新电影时更新）？

因为我们无法使用自定义 CSS 修改选项卡，所以必须将其添加到 variables.scss 中...

- lrosique

---

variables.scss 将在构建时编译为 CSS。 - Muhammed Albarmavi

PS：我知道如何为我的应用程序设置主题，但是我无法动态更改variables.scss中的颜色？（或绕过它） - lrosique

你可以使用CSS变量，我认为这是唯一的方法，因为你可以在运行时设置一些主题值，例如颜色、字体大小等。 - Muhammed Albarmavi

Answer 1

如果您想在运行时更新任何CSS颜色或值，例如字体大小，可以使用CSS变量。通过这种方式，您可以在运行时更新基于CSS变量的任何CSS属性值，例如我的示例中的颜色，但它可以是任何CSS值。

考虑这个例子。

style.css

:root {
--color : red;
}

 * {
   color:var(--color)
 }

AppComponent

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

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

模板

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

Stackblitz 演示

Sass 变量将在构建时编译为其值，因此它们在运行时不可重用。

- Muhammed Albarmavi

---

非常感谢，它完美地工作了:D 我不知道我们可以像那样从JS传递变量到CSS ^^ - lrosique

在编程领域，stackoverflow 堪称黄金的时刻之一。document.documentElement.style.setProperty(--color, color); 在 Ionic cordova 中也非常完美地实现了。 - Nasenbaer

谢谢...救了我的一天。 - Shurvir Mori

Answer 2

对于大多数使用情况，通过将变量与元素映射来编程更改元素的CSS值是很方便的。我们希望每次更新变量时都能改变CSS值，而不仅仅通过this.ngZone.run()。

<div class="progress" [style.height]=currentLevelPercentage>

这个例子展示了如何将 div 元素（class 为 progress）的高度 CSS 属性映射到变量 currentLevelPercentage，并动态更改其值。 currentLevelPercentage 是必须在 TypeScript 文件中强制存在的变量。

- Rounak Datta

Answer 3

对于那些想要知道如何在超级标签（ionic）中更改每个选项卡背景颜色的人，这是我的四个选项卡代码（我现在也可以使用代码更改高度和宽度^^）。

在tabs-page.scss中：

  :root {
    --color1: white;
    --color2: white;
    --color3: white;
    --color4: white;
  }

  super-tab-button:nth-of-type(1) {
    background-color: var(--color1)
  }

  super-tab-button:nth-of-type(2) {
    background-color: var(--color2)
  }

  super-tab-button:nth-of-type(3) {
    background-color: var(--color3)
  }

  super-tab-button:nth-of-type(4) {
    background-color: var(--color4)
  }

在 tabs-page.html 中：不需要做任何特别的事情。

在 tabs-page.ts 中：

constructor(public navCtrl: NavController, public navParams: NavParams) {
    document.documentElement.style.setProperty('--color1', this.movie.colors[0]);
    document.documentElement.style.setProperty('--color2', this.movie.colors[1]);
    document.documentElement.style.setProperty('--color3', this.movie.colors[2]);
    document.documentElement.style.setProperty('--color4', this.movie.colors[3]);
  }

谢谢 @malbarmawi！

- lrosique

Answer 4

只需尝试这个

[ngStyle]="{'background-color': item.color}"

- Chess Master

Answer 5

关于动态更改样式的想法，这是我正在使用的方法。

<span [style.width]=foo></span>

在你的 .ts 文件中更改 ‘foo’ 的值。 https://angular.io/docs/ts/latest/guide/template-syntax.html#!#style-binding

- Muhammad Tahir