下面是我的 .ts 文件,
import { Component } from '@angular/core';
@Component({
selector: 'app-event-binding',
templateUrl: './event-binding.component.html',
styleUrls: ['./event-binding.component.css']
})
export class EventBindingComponent {
textColor = '';
onInput = (ev: any) => {
this.textColor = ev.target.value;
}
}
下面是我的 HTML 模板,
<div>
<h3 [style.color]="textColor">EVENT BINDING</h3>
<input type="text" (input)="onInput($event)">
</div>
这里当我在输入框中完全输入“blue”时,我的 h3 文本颜色会更改为蓝色。 但我注意到当我按退格键并且现在 textColor 的值为“blu”时,文本仍然保持蓝色。我期待着回到黑色。 仅当我清除整个输入时它才会变为黑色。 那么html中的颜色是否保留了某种历史呢?这是什么作用?
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
使用纯 JavaScript 操作 DOM 时也会发生同样的情况,我为您准备了一个示例:
document.querySelector('input').addEventListener('input', event => { document.querySelector('h3').style.color = event.target.value; })