javascript - 数据属性的 CSS 不会刷新/重绘

Question

在 HTML5/JS 应用程序中，我们有一个 View ，其样式取决于元素的 data-attribute:

喜欢

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

或

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

CSS

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

这似乎在页面重新加载的任何地方都工作得很好。

但是当通过 JS 以编程方式设置数据属性时，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');

如下所示:Changing a data attribute in Safari, but the screen does not redraw to new CSS style