Aktualisierung Pseudoelement Inhalt Eigenschaft, wenn HTMLElement.dataset Updates

Question

ich die CSS attr Funktion bin mit verknüpfen dynamisch den Wert eines data-* Attribut auf den Inhalt eines Pseudo-Element:

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

ich dann regelmäßig zu aktualisieren dass Datenattribut über die HTMLElement.dataset Eigenschaft:

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

ich, dass in Internet Explorer zu bemerken, obwohl alle diese Funktionen unterstützt werden, die pseudo-Element nicht sein Inhalt Eigenschaft r aktualisiert mit Wende die letzten Änderungen an.

Ich habe eine Geige gebaut, um das Problem zu demonstrieren. Sie können es sehen online here.

Was kann ich tun, um diese Einschränkung zu umgehen?

Answer 1

Es gibt einen bekannten Bug/eine Einschränkung im Internet Explorer, der dazu führt, dass Pseudoelemente zu nicht aktualisiert werden, wenn Datasets aktualisiert werden. Eine ausreichende Behelfslösung ist stattdessen die Attribute mit dem älteren (und damit im Großen und Ganzen unterstützt) setAttribute Verfahren zu aktualisieren:

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

Sie können see the results here.

Ein Fehler wurde intern gegen dieses Problem gemeldet und die entsprechenden Feature-Teams sollten die Angelegenheit in einer anstehenden Triage untersuchen. So bald wie möglich werden wir Entwicklungszyklen für die Lösung der Angelegenheit haben.

Answer 2

IE neigt dazu, eine Menge Probleme zu haben.

jQuery ist eine beliebte JavaScript-Bibliothek, die für die Lösung von Problemen mit verschiedenen Browsern entwickelt wurde. Sie können jQuery .attr() Funktion verwenden, um Ihre Datenattribute zu setzen, etwa so:

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

See: http://api.jquery.com/attr/

Alternativ Sie in der Verwendung von jQuery .data([key], [value]) Methode suchen.

Hinweis: Seien Sie vorsichtig bei der Verwendung von Datumsangaben mit dem Internet Explorer. Nach meiner Erfahrung können einige gängige ISO 8601-Datumsformate nicht analysiert werden. Ich würde vorschlagen, eine andere Bibliothek für die Behandlung von Daten und Uhrzeiten: moment.js