9

在 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 属性会在所有相关的桌面浏览器中呈现，但不会在移动 safari 中呈现。

JS 部分如下所示：

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

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

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

4

2 回答 2

7

好的，更改数据属性似乎不会触发所有浏览器中元素的重绘！？

但是，更改class属性确实如此。一种解决方法，但可以解决问题。

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

如此处所示：在 Safari 中更改数据属性，但屏幕不会重绘为新的 CSS 样式

于 2013-08-01T06:38:27.850 回答
0

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

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

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

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

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

对我有用的是使用此功能，我将其编辑为以下内容（假设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>
于 2018-05-17T15:05:54.603 回答