我在使用Svelte時遇到了一個需求,需要在元素上動態應用一些CSS屬性,當其中一個變量具有特定的值時。
我找到的最簡單的解決方案是在selected
變量值為true
時添加一個HTML類,然後我寫了一些針對具有該類的元素的CSS:
<style>
/\* ...其他CSS... \*/
span.cell.selected {
outline-color: lightblue;
outline-style: dotted;
}
</style>
<span class="cell {selected === true ? 'selected' : ''}">
{value}
</span>
這種需求是如此常見,以至於Svelte添加了將類名綁定到變量值的功能:
<span class="cell" class:selected="{selected}">
{value}
</span>
更簡潔的方式是使用簡寫符號:
<span class="cell" class:selected>
{value}
</span>