在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=""></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>