首页 > 解决方案 > 苗条的动态风格处理

问题描述

https://svelte.dev/repl/83031a6a492c4a30a861e4310209e9b6?version=3.24.0

是否有另一种方法而不是将样式直接写入原始样式标签?:

<div style="width: {width}; height: {height};">ᕕ( ᐛ )ᕗ&lt;/div>

或者; 在这种情况下,最佳实践是什么,交付的样式可以是任何东西/是动态的,而不是可预分类的?

标签: javascriptstylessvelte

解决方案


这是一个例子:

<script>
  let bgcol="blue"
  let style=`color:red;background-color:${bgcol}`
</script>  
    ​
<h1 {style}> Hello <h1>

编辑:{style}是简写style={style}

您可以从 REPL 找到工作示例:

https://svelte.dev/repl/f039834923014cd7aca30c54d957c844?version=3.24.0


推荐阅读