html 如何在CSS或Tailwind类中设置可变宽度？

uurv41yg 于 2022-12-09 发布在其他

关注(0)|答案(1)|浏览(158)

我从我的Django视图中得到了宽度，但是我不知道我是否可以在CSS中使它可变。
我一直试图设置Tailwind，但我想象，这不是正确的做法：

{% for movie in movies %}
<div id="bar" class="w-[{movie.score}]"
style="transition: 1s">
          {{movie.score}}
</div>
{% endfor %}

然而，我也尝试直接在CSS中实现，但是样式不接受变量，如：

{% for movie in movies %}
<div id="bar" style="transition: 1s; width: {{movie.score}}; ">
          {{movie.score}}
</div>
{% endfor %}

我也尝试过用JavaScript修改它，但是我必须选择多个元素，因为会有不同的条。所以，这不起作用。如果我用let，我会收到消息说电影是以前声明的，但是用var什么也不会改变。
第一次
因此，我想使条形宽度与电影的配乐相同。

1条答案

第二个解决方案-通过style属性直接设置宽度在技术上应该是可行的。唯一缺少的是宽度的单位。附加px应该没问题：

{% for movie in movies %}
<div id="bar" style="transition: 1s; width: {{movie.score}}px; ">
          {{movie.score}}
</div>
{% endfor %}