样式已设置但未更改答案

【问题标题】：Style being set but not changing样式已设置但未更改
【发布时间】：2016-12-09 13:40:51
【问题描述】：

更新：我已经读到在 Angular 中，你不能操作 DOM。那你应该怎么做，最佳实践是什么？我尝试过使用超时、NgZone、ChangeDetectionStrategy.OnPush、ChangeDetectorRef detectChanges() 都没有成功。

我有一个 html img 元素：

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

还有一些sccs：

img.selected {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

当它加载时，它会应用所选的类，并使图像按预期变灰。

但是，当我运行以下 typescrpt 时，图像只是保持灰色：

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

当我记录 className 时，它显示 selected 之前存在，之后已被删除。

console.log(imgEl.classList);

任何想法为什么即使我删除了一个类名，样式也没有反映？

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

谢谢

更新：

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

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

HTML

  <ion-row *ngFor="let trio of getTriples()">
    <ion-col *ngFor="let item of trio" (click)="itemTapped(item)">
      <center>
      <div class="row responsive-md">
        <img class="selected" id="icon-image-{{item.id}}" src="{{item.icon}}" height="75" width="75" />
      </div>
      </center>
    </ion-col>
  </ion-row>

打字稿

  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);
  }

【问题讨论】：

您需要创建一个minimal reproducible example。从根本上说，清除 className 将删除元素中的所有类，从而删除这些类应用的任何样式。
"我看源码的时候，不是在更新DOM，而是在修改imgEl.classList，你知道为什么吗？"如果您在 Firefox 中查看源代码，您会得到页面的初始状态，而不是最新状态，因此不会反映通过 JS 进行的任何更改。我认为 Chrome 可能会为您提供最新的信息。无论如何，如果您只是打开开发人员工具，那将是有效 HTML 的实时视图。
谢谢，我会在 Chrome 中尝试。我在我提出的问题中添加了一个更新，说 DOM 似乎已重置。 p.s.我正在使用 Ionic 2。
在Chromes开发者工具中试过，imgEl.setAttribute("class", "");执行时DOM没有变化。
这是范围问题，我是否更新了错误的文档？答案是什么，我一头雾水。感谢任何帮助。我在 jsfiddle 中做了一个简化版本，它可以工作，所以我认为这可能与 Ionic2 有关？

标签： javascript html css typescript scss-lint

【解决方案1】：

这是一个解决方案：

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"/>

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

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

【讨论】：

【解决方案2】：

您可以尝试使用ng-class。

Documentation here

A simple example

【讨论】：

【解决方案3】：

尝试为元素分配一个取消选择的类。

向其中添加所需的 css。

有点像这样

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

css

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

【讨论】：

您好 vishak，感谢您的反馈。我试过了（添加img.deselected）但没有成功。
你能分享一下小提琴吗？
感谢 vishak，我已经在上面发布了解决方案。