数据属性的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以编程方式设置data-attribute时,CSS属性将在所有相关的桌面浏览器中呈现,但不会在移动Safari中呈现.

JS部分看起来像这样:

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

关于如何强制应用这些属性的任何想法(刷新/重绘某些东西)？

我想避免使用class属性和不同的类,因为事情比这里显示的更复杂......

Answer 1

好的,改变数据属性似乎并没有触发所有浏览器中元素的重绘!

class但是改变属性.一种解决方法,但做的伎俩.

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