/

如何在Svelte中動態應用CSS

如何在Svelte中動態應用CSS

我在使用Svelte時遇到了一個需求，需要在元素上動態應用一些CSS屬性，當其中一個變量具有特定的值時。

我找到的最簡單的解決方案是在selected變量值為true時添加一個HTML類，然後我寫了一些針對具有該類的元素的CSS：

1
2
3
4
5
6
7
8
9
10
11
<style>
 /\* ...其他CSS... \*/
 span.cell.selected {
 outline-color: lightblue;
 outline-style: dotted;
 }
</style>

<span class="cell {selected === true ? 'selected' : ''}">
 {value}
</span>

這種需求是如此常見，以至於Svelte添加了將類名綁定到變量值的功能：

1
2
3
<span class="cell" class:selected="{selected}">
 {value}
</span>

更簡潔的方式是使用簡寫符號：

1
2
3
<span class="cell" class:selected>
 {value}
</span>

tags: [“Svelte”, “CSS”, “dynamic”, “class”]