Question

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

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

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

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

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

我已经建立了一个小提琴来证明这个问题。您可以查看online here。

我可以做些什么来解决这个限制？

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

你可以see the results here。

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

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日期格式。我建议另一个处理日期和时间的库：moment.js

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

2 个答案: