CSS по данному атрибуту не обновит/перекрашивать

Question

В приложении HTML5/JS мы имеем вид с некоторыми стилями в зависимости от data-attribute элементов:

как

<li data-level="0"></li> 

или

<li data-level="1"></li> 

CSS

li[data-level^="1"] { 
    /* some styles */ 
} 

Кажется, что все работает отлично на page reload.

Но когда атрибут данных устанавливается программно через JS, свойства CSS получают визуализированы во всех соответствующих браузерах рабочего стола, но не в мобильном сафари.

JS часть выглядит следующим образом:

this.$el.attr('data-level', this.model.getLevel()) 

Любые идеи о том, как заставить применить эти свойства (обновить/перекрашивать что-то)?

Я хотел бы избежать использования атрибутов класса и разных классов, как все гораздо сложнее, чем показано здесь ...

Answer 1

нормально, изменение данных атрибутов просто не кажется, чтобы вызвать перерисовку элемента во всех браузеров!?

Изменение class атрибут однако. Вид обходного пути, но делает трюк.

this.$el 
     .attr('data-level', this.model.getLevel()) 
     .addClass('force-repaint') 
     .removeClass('force-repaint'); 

Как видно здесь: Changing a data attribute in Safari, but the screen does not redraw to new CSS style