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');

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

Answer 2

就我而言，我正在使用icomoon生成的字体图标并使用数据属性data-icon动态更改HTML实体。

在页面重新加载时，它将与此css协同工作：

[data-icon]:before {
    content: attr(data-icon);
}

但是没有重新加载，甚至没有更改类，它也没有改变，只显示了代码。

<span class="font-icon" data-icon="&#xe901;"></span>

对我有用的是使用this function，我编辑了以下内容（假设code形状为e901）：

export class StringUtils {
  static emptyElement = document.createElement('div');
  static fontCodeToSymbol(code: string): string {
    let element = StringUtils.emptyElement;
    let symbol: string | nullable = `&#x${code};`;
    if (symbol && typeof symbol === 'string') {
      element.innerHTML = symbol;
      symbol = element.textContent;
      element.textContent = '';
    }
    return symbol || '';
  }
}

哪会直接提供data-icon中的正确字符：

<span class="font-icon" data-icon=""></span>

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

2 个答案: