CSS by data属性不会刷新/重新绘制

CSS by data-attribute will not refresh/repaint

本文关键字：新绘制 绘制 刷新 data by 属性 CSS      更新时间：2023-09-26

在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属性和不同的类，因为事情比这里显示的更复杂。。。

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

但是，更改class属性确实有效。这是一种变通方法，但确实有效。

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

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

在我的案例中，我使用的是icomoon生成的字体图标，并使用数据属性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>
相关文章：