如何在我的 CSS 或 Tailwind class 中设置可变宽度？

Question

我从我的 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 更改它，但我必须 select 多个元素，因为会有各种条形图。 所以，这根本行不通。 如果我使用 let，我会收到消息说之前已经声明了电影，但是使用 var 没有任何变化。

def get_context_data(self, **kwargs):

        context = super(MoviesRatePage, self).get_context_data(**kwargs)

        context['movies'] = movies

        return context

{% block javascript %}
    <script type="text/javascript">

      var movies = "{{movies}}";

      for (let i = 0; i < movies.length; i++) {
        document.querySelectorAll("#bar")[i].style.width = `${movies[i].score}%`;
      }

    </script>
    {% endblock javascript %}

因此，我想让条形宽度与电影的配乐相同。

Answer 1

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

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