如何从 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

一种更"离子的方式"是使用CSS 属性。就像您在文档中看到的那样，该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使用像--color这样的CSS属性，或者它只是colorCSS属性(像这样：color: var(--input-custom-color);)都没有关系。

Answer 2

好的，异端猴子的答案在技术上是有效的，

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

但它在我的编辑器中给了我一个红色波浪线 style 元素

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

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

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