伪元素的内容不会在IE11中更新 问题

问题描述

我有以下代码：

someSelector:after {
  content: attr('data-some-data');
  /* ... */
}

在我将此属性更改为其他属性之前，一切正常（该值反映在屏幕上）

document.querySelector('someSelector').dataset.someData = 'some other value';

内容不会在屏幕上更新，但是当我打开DOM资源管理器时，我可以清楚地看到，该属性的值确实已更新。

我尝试通过浏览器控制台手动进行设置，但没有成功。

所有内容都可以在其他浏览器中正常运行，但是在IE中当然可以...

问题

是否可以强制更新此值，以便在更改时将其反映在屏幕上？

解决方法

由于某些未知原因，IE11在修改元素数据集时不会重绘DOM。

但是，如果您必须支持IE11，请使用Element.setAttribute方法，如下所示：

document.querySelector('someSelector').setAttribute('data-some-data','some other value');

将重绘DOM，并应更新伪元素的内容。