Javascript 如何使用TypeScript更改CSS中的值？

我想做一个

文本框，在这里你可以写一种特定的颜色，比如说

'red'

，然后一个特定的文本就会像这样被着色。我找到了一些关于如何做的指南，但是代码是用JavaScript编写的，而不是用TypeScript编写的。到目前为止，我得到了这个：

HTML

<input id="color" />
<h1>Change the color</h1>

<input [(ngModel)]="color" >

<div [ngStyle]="{'background': color}">...</div>

---

当我使用.ts类时，我想知道如何编写上面的JavaScript？

在angular中，我们有一个名为的指令，它可以帮助您做到这一点

因此，您可以在html中添加以下代码：

HTML

<input id="color" />
<h1>Change the color</h1>

<input [(ngModel)]="color" >

<div [ngStyle]="{'background': color}">...</div>

---

因此，您在输入中键入的任何颜色都将被渲染，您可以使用颜色名称或其代码，如黑色的

#000

，白色的

#fff

，等等。

要实现这一点，您应该读取输入值（让我们通过指令使用双向绑定），然后将此值作为样式规则应用（非常适合这种情况）。最后，您应该只需要几行代码：

HTML:

<input [(ngModel)]="color" />
<h1 [style.color]="color">Change the color</h1>

export class AppComponent  {
  color: string;
}

这是一本书

举个例子，我还在CSS中定义了一个默认的蓝色。这可以作为默认颜色使用，因为在这种情况下，通过属性定义的样式规则具有更高的优先级

更新 如果您想控制应用程序上所有元素的颜色，您可以通过以下方式在顶级组件上使用：

export class AppComponent  {
  color: string;

  @HostBinding('style')
  get myStyle(): SafeStyle {
    return this.sanitizer.bypassSecurityTrustStyle(`color: ${this.color};`);
  }

  constructor(private sanitizer:DomSanitizer) {}
}

这是一本书

---

每个有效的javascript代码都是有效的typescript代码。如果上面的javascript代码正常工作，那么它应该像typescript中的代码一样正常工作。当您在样式中使用变量、mixin等时，请确保您使用的是SCSS而不是CSSWell，问题是……如果我将该代码放入.ts类中，它会崩溃。我会遇到很多错误，我会纠正这些错误可能是因为语法不同。浏览器无法读取typescript。您必须将其转换为javascript。确保webpack配置为在未设置的情况下进行转换。@Kshitij他们为什么要使用SCS？CSS有变量（技术上称为“自定义属性”）有一段时间：@Kshitij，但OP只是在谈论变量，特别是在JavaScript中设置变量。在这种情况下，使用SCS不会有帮助。我完全支持SCS和其他预处理器，但建议在不使用它们的情况下强制使用它们，这与“使用jQuery”一样糟糕事情发生在十年前。这与OP演示的有些不同。OP正在更改CSS变量，这将更改使用该变量作为其值（背景色、颜色等）的任何属性的值，而不仅仅是

h1

。谢谢你的回答！虽然它可以按预期的方式工作，但我很好奇如何以这种方式编写它来更改css文件。甚至可以使用Angular？EDIT:对不起，我刚刚检查了StackBlitz链接。干杯！！@Questieme我已经用另一种方法更新了我的答案，请检查一下，希望能有帮助。

export class AppComponent  {
  color: string;

  @HostBinding('style')
  get myStyle(): SafeStyle {
    return this.sanitizer.bypassSecurityTrustStyle(`color: ${this.color};`);
  }

  constructor(private sanitizer:DomSanitizer) {}
}