Javascript 当HtmleElement.dataset更新时更新伪元素内容属性

我正在使用CSS

attr

函数将

data-*

属性的值动态链接到伪元素的内容：

body::after { content: attr(data-after) }

然后，我通过

HTMLElement.dataset

属性定期更新该数据属性：

setInterval(function () {
    document.body.dataset.after = new Date;
}, 1000);

我注意到，在InternetExplorer中，虽然所有这些功能都受支持，但伪元素的内容属性没有更新以反映最新的更改

我制作了一把小提琴来演示这个问题。你可以看看

---

如何克服此限制？

目前Internet Explorer中存在一个已知的错误/限制，导致在数据集更新时不更新伪元素。一个足够的解决方法是使用较旧的方法更新属性（因此得到更广泛的支持）

setAttribute

方法：

setInterval(function () {
    // Work-around for IE bug: http://stackoverflow.com/q/28031707
    document.body.setAttribute( "data-after", new Date );
}, 1000 );

你可以

---

已经针对这个问题在内部提交了一个bug，相应的功能团队应该在即将到来的分类中评估这个问题。我们将尽快分配开发周期来解决问题。

IE往往有很多问题

jQuery是一个流行的JavaScript库，创建时考虑到了解决跨浏览器问题。可以使用jQuery的.attr（）函数设置数据属性，如下所示：

setInterval(function () {
    $('body').attr('data-after', new Date());
}, 1000);

见：

或者，您可以研究使用jQuery的

.data（[key]、[value]）

方法

---

注意：在Internet Explorer中使用日期时要小心，根据我的经验，它无法解析一些常见的ISO 8601日期格式。我建议使用另一个库来处理日期和时间：

您知道哪些版本的IE受到影响吗？HTMLElement.dataset是在IE11中添加的。目前，IE的开发中版本也受到影响，尽管我今天确实提出了一个bug。我也遇到了同样的问题，但不幸的是，在我在互联网上进行研究等过程中，我没有找到你的答案，所以在我自己找到解决方法之前：（.问题现在仍然存在于IE中。jQuery

.data（）

方法不更新用于CSS内容伪元素属性的数据属性