如何从 Typescript 更新 HTML 元素的属性（如颜色）

Question

我页面的 HTML 部分有以下内容

<ion-row padding>
    <ion-input [(ngModel)]="addressSearchfield" name="addressSearch'></ion-input>
</ion-row>

并且我想更改页面 TS 部分中离子输入的颜色。

我可以用这样的代码获取存储在其中的值

addressSearchfield: string;
//...
console.log (this.addressSearchfield);

我假设我可以像这样引用元素及其属性：

addressrow: any;
// ...
this.addressSearch.color = '#FFFFFF';

但我收到错误 Cannot set property 'color' of undefined

我应该怎么做？

Answer 1

好的，Heretic Monkey 的回答在技术上是可行的，

document.querySelector('[name="addressSearch"]').style.color = '#FFFFFF';

但它在我的编辑器中给了我一个 red-squiggle 样式元素

但是，基于此进行一些实验：

addressSearch: HTMLElement;
// ...
this.addressSearch= document.querySelector('[name="addressSearch"]');
this.addressSearch.style.backgroundColor = '#FFFFFF';

使用更快乐的编辑器提供相同的效果。

Answer 2

更 "Ionic way" 的做法是使用 CSS 属性 。就像您在 the docs 中看到的一样，ion-input 有一个 CSS 属性设置 color:

CSS Custom Properties

Name    | Description
--------|------------------------
...
--color | Color of the input text
...

因此您可以在 variables.scss 文件中定义一个新的 CSS 属性，如下所示：

:root {

  // ...

  --input-custom-color: blue; // default color for the input

}

然后在您的页面中，设置输入颜色以使用 CSS 属性:

// my-page.page.scss

[name="addressSearch"] {
  --color: var(--input-custom-color);
}

那只会使用默认颜色。所以现在下面的代码是改变组件的颜色（或者实际上，CSS 属性的值）：

// Angular
import { Component, Inject } from "@angular/core";
import { DOCUMENT } from '@angular/platform-browser';

// Ionic
import { DomController } from '@ionic/angular';

@Component({
  selector: "app-my-page",
  templateUrl: "my-page.page.html",
  styleUrls: ["my-page.page.scss"]
})
export class MyPage {

  constructor(
    private domCtrl: DomController,
    @Inject(DOCUMENT) private document
  ) {}

  public changeColor(aColor: string): void {

    // Tell Ionic we're going to write in the DOM
    this.domCtrl.write(() => {

      // Update the value of the CSS property
      this.document.documentElement.style.setProperty('--input-custom-color', aColor);
    });
  }
}

现在您可以执行类似 this.changeColor('green'); 的操作，我们将在视图中更新输入的颜色 :)

这样做的最大好处是，您可以通过更新 CSS 属性（甚至位于您应用程序的任何其他页面中的输入）来更改所有输入，而不是直接访问每个 DOM 元素更新其样式。

请注意，同样的操作适用于任何样式 - Ionic 使用 CSS 属性（如 --color 还是仅使用 [=15] 都没有关系=] CSS 属性（像这样：color: var(--input-custom-color);）

如何从 Typescript 更新 HTML 元素的属性（如颜色）

How do I update a property (like the color) of an HTML element from Typescript

typescript

ionic-framework

ionic4

如何从 Typescript 更新 HTML 元素的 属性（如颜色）

How do I update a property (like the color) of an HTML element from Typescript

typescript

ionic-framework

ionic4

如何从 Typescript 更新 HTML 元素的属性（如颜色）