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

Question

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

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

然后我会通过 HTMLElement.dataset 属性:

定期更新该数据属性

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

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

我构建了一个 fiddle 来演示这个问题。您可以查看它 online here.

如何解决此限制？

Answer 1

现在 Internet Explorer 中有一个已知的 bug/limitation，它会导致伪元素在数据集更新时不更新。一个足够的解决方法是用旧的（因此更广泛支持）setAttribute 方法更新属性：

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

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

Answer 2

IE 往往有很多问题。

jQuery 是一个流行的 JavaScript 库，创建时着眼于解决跨浏览器问题。您可以使用 jQuery 的 .attr() 函数来设置数据属性，如下所示：

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

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

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

Updating pseudo-element content property when HTMLElement.dataset updates