在 HTMLElement.dataset 更新时更新伪元素内容属性

Question

我正在使用 CSS attr 函数将 data-* 属性的值动态链接到伪元素的内容：

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

然后，我通过 HTMLElement.dataset 属性定期更新该数据属性：

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

我注意到，在 Internet Explorer 中，尽管支持所有这些功能，但伪元素没有更新其内容属性以反映最新的更改。

我已经建立了一个小提琴来演示这个问题。您可以在此处在线查看。

我该怎么做才能解决此限制？

Answer 1

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

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

您可以在此处查看结果。

内部已针对此问题提交了一个错误，相应的功能团队应在即将进行的会审中评估此事。我们将尽快分配开发周期来解决问题。

Answer 2

IE往往有很多问题。

jQuery是一个流行的JavaScript库，旨在解决跨浏览器问题。您可以使用jQuery的.attr（）函数来设置数据属性，如下所示：

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

请参阅：http://api.jquery.com/attr/

或者，你可以考虑使用jQuery的.data([key], [value])方法。

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