Aktualizacja nieruchomość treść pseudo-element, kiedy HTMLElement.dataset aktualizacje

Question

używam funkcji CSS attr dynamicznie powiązać wartość atrybutu data-* do treści elementu pseudo:

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

ja wtedy regularnie aktualizowanego że atrybut danych za pośrednictwem właściwości HTMLElement.dataset:

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

mam zwrócić uwagę, że w programie Internet Explorer, choć wszystkie te funkcje są obsługiwane, pseudo-element nie jest o jego właściwość zawartość zaktualizowane do R eflect najnowsze zmiany.

Zbudowałem skrzypce, aby zademonstrować problem. Możesz go zobaczyć online here.

Co mogę zrobić, aby obejść to ograniczenie?

Answer 1

W serwisie Internet Explorer jest znany błąd/ograniczenie, które powoduje, że pseudoelementy do nie są aktualizowane, gdy aktualizuje zbiory danych. Wystarczająca obejście jest zamiast aktualizować atrybuty ze starszymi (a zatem szerzej obsługiwane) setAttribute metody:

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

Można see the results here.

Wewnętrzny błąd został zgłoszony przeciwko temu problemowi, a odpowiednie zespoły ds. Funkcji powinny przeanalizować sprawę w nadchodzącym triage. Tak szybko, jak to możliwe, będziemy dysponować modułami programistycznymi przeznaczonymi do rozwiązania problemu.

Answer 2

IE ma zazwyczaj wiele problemów.

jQuery to popularna biblioteka JavaScript stworzona z myślą o rozwiązywaniu problemów związanych z różnymi przeglądarkami. Można użyć funkcji jQuery za .attr(), aby ustawić atrybuty danych, tak jak poniżej:

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

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

Alternatywnie, można zajrzeć do korzystania .data([key], [value]) metody jQuery.

Uwaga: Zachowaj ostrożność, używając dat w programie Internet Explorer. Z mojego doświadczenia wynika, że ​​nie można przeanalizować niektórych typowych formatów daty ISO 8601. Sugeruję inną bibliotekę do obsługi dat i godzin: moment.js