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

我正在为扑克牌制作一个自定义元素。我使用SVG图像作为背景，我希望它们在西服或军衔属性更改时更改背景图像

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

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

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

它们都可以工作，但是JS方式添加了内联样式，我想防止这种情况，CSS方式非常大。

---

是否有巨大的性能差异需要考虑？

< P>不应该有巨大的性能差异，或者只有在同一页面中有几百个或数千个自定义元素。 在后一种情况下，您应该在操作条件下测试两种解决方案，然后选择更好的解决方案

---

如果不是这样，这将取决于项目的管理方式：维护CSS和JS文件的团队是否相同。

应该不会有巨大的性能差异，或者只有在同一页面中有数百或数千个自定义元素时才会出现

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

---

如果不是这样，则取决于项目的管理方式：维护CSS和JS文件的团队是否相同。

仅供参考，内嵌样式是有效的。人们不赞成它们，因为它们会使HTML页面更难维护。当使用JS时，它们不会受到反对，因为它们是高效的。在这种情况下，选择您认为可以使代码更易于维护的选项。我个人会在这里选择JS。仅供参考，内联样式是有效的。人们不赞成它们，因为它们会使HTML页面更难维护。当使用JS时，它们不会受到反对，因为它们是高效的。在这种情况下，选择您认为可以使代码更易于维护的选项。我个人会在这里选择JS。

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