Javascript 正在设置但未更改的样式 更新：我在Angular中读到，您不能操纵DOM。那么你应该怎么做，最佳实践是什么？我尝试过使用timeout、NgZone、ChangeDetectionStrategy.OnPush、ChangeDetectorRef-detectChanges（）都没有成功。

我有一个htmlimg元素：

<img class="selected" id="icon-image-{{item.id}}" src="{{item.icon}}" height="75" width="75" />

加载时，将应用选定的类，并使图像按预期变为灰色

但是，当我运行以下类型crpt时，图像仅保持灰色：

let imgEl: HTMLElement = document.getElementById('icon-image-' + subCategoryModel.id);
imgEl.className = "";

当我记录类名时，它显示selected在前面，在后面被删除

console.log(imgEl.classList);

你知道为什么即使我删除了一个类名，样式也没有反映出来吗

---

当我查看源代码时，它不是在更新DOM，而是在修改imgEl.classList。你知道为什么吗

谢谢

更新：

奇怪的是，如果我手动更改DOM中的类名（例如在Firebug中），它会反映出更改。但是，只要单击图像，它就会更新为原始值。就好像正在刷新DOM一样

如果是这种情况，那么如何动态更新DOM呢？因为DOM刷新只会覆盖所有更改

Html

---

尝试将取消选择的类指定给元素

将所需的css添加到其中

有点像这样

let imgEl: HTMLElement = document.getElementById('icon-image-' subCategoryModel.id);
imgEl.className = "deselected";

css

---

您可以尝试使用

ng类

这是一个解决方案：

html

      <img class="item-stable" id="icon-image-{{item.id}}" src="{{item.icon}}" height="75" width="75" (click)="toggleItem(item)" [class.item-selected]="item === itemShown"/>

---

您需要创建一个。从根本上说，清除

className

将删除元素中的所有类，从而删除这些类应用的任何样式。“当我查看源代码时，它不是在更新DOM，而是在更改imgEl.classList。你知道为什么吗？”如果你在Firefox中查看源代码，你会得到页面的初始状态，而不是最新状态，因此，通过JS进行的任何更改都不会反映出来。我想Chrome可能会给你最新的。无论如何，如果你打开开发者工具，那将是一个真实的HTML视图。谢谢，我将在Chrome中尝试。我在我提出的问题中添加了一个更新，表示DOM似乎被重置了。p、 我使用的是Ionic 2。在Chromes开发工具中试用过，当

imgEl.setAttribute（“class”）时，DOM不会改变已执行。这是范围问题吗？我是否更新了错误的文档？答案是什么，我很困惑。谢谢你的帮助。我用JSFIDLE做了一个简化版本，它可以工作，所以我认为这可能与Ionic2有关？嗨，vishak，谢谢你的反馈。我尝试过（添加
img。取消选择
）但没有成功。你能分享一把小提琴吗？谢谢vishak，我在上面发布了一个解决方案。
  itemTapped(subCategoryModel: SubCategoryModel) {
    let idx: number = this.isInArray(this.employeeModel.subCategories, subCategoryModel);
    let imgEl: HTMLElement = document.getElementById('icon-image-' + subCategoryModel.id);
    if (idx >= 0) {
      this.employeeModel.subCategories.splice(idx, 1);
      imgEl.setAttribute("class", "");
    } else {
      this.employeeModel.subCategories.push(subCategoryModel);
      imgEl.setAttribute("class", "selected");
    }
    console.log('icon-image-'+subCategoryModel.id+' ('+imgEl.id+'): ' + document.getElementById('icon-image-' + subCategoryModel.id).className);
  }

let imgEl: HTMLElement = document.getElementById('icon-image-' subCategoryModel.id);
imgEl.className = "deselected";

img.deselected {
  /* your css here */
}

      <img class="item-stable" id="icon-image-{{item.id}}" src="{{item.icon}}" height="75" width="75" (click)="toggleItem(item)" [class.item-selected]="item === itemShown"/>

  isItemShown(item: SubCategoryModel) {
    return this.itemShown === item;
  }

  toggleItem(item: SubCategoryModel) {
    if (this.isItemShown(item)) {
      this.itemShown = null;
    } else {
      this.itemShown = item;
    }
  }