javascript - 多个预定义样式还是动态更改内联样式？

我正在为扑克牌定制元素。我将SVG图像用作背景，并且我希望它们在更改西服或等级属性时更改背景图像。

据我所知，有两种方法可以这样做-一种是使用“ attributeChangedCallback”方法：

static get observedAttributes() {return ["suit", "rank"];}
attributeChangedCallback(name, oldValue, newValue) {
  this.style.backgroundImage = `url(...)`;
}

另一个是有很多CSS属性选择器：

:host([suit="clubs"][rank="4"]) {
  background-image: url(...);
}
:host([suit="clubs"][rank="5"]) {
  background-image: url(...);
}
...

它们都可以工作，但是JS方式增加了我要防止的内联样式，并且CSS方式很大。
我需要考虑巨大的性能差异吗？

最佳答案

不应有巨大的性能差异，或者只有在同一页面中有成百上千个自定义元素时才应如此。

在后一种情况下，您应该在运行条件下测试两种解决方案，然后选择更好的解决方案。

如果不是这种情况，则取决于项目的管理方式：是否由同一团队来维护CSS和JS文件。

关于javascript - 多个预定义样式还是动态更改内联样式？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42892906/