从 Django 视图将值传递给 CSS 样式标签答案

【问题标题】：Pass value to CSS style Tag from Django View从 Django 视图将值传递给 CSS 样式标签
【发布时间】：2021-01-17 21:49:43
【问题描述】：

我有这个View，我在其中生成一个百分比值，该值取决于后端的某些逻辑。

def my_view(request):
    #[..other stuff..]
    perc_value = 80 # this changes with the logic above
    
    context = {'perc_value': perc_value}

    return render(...)

在我的HTML 中，我需要渲染一个进度条，其中填充有perc_value，如下所示：

<div class="progress progress-xl mb-2"> 
    <div class="progress-bar" role="progressbar" style="width: {{ perc_value }}">{{ perc_value }}%</div>
</div>

我发现了这个类似的问题 (link)，它已经很老了，我找不到让它工作的方法。解决此类问题的最佳方法是什么？

【问题讨论】：

尝试将% 放在 {{ perc_value }} 之后。还要确保将context 传递给render

标签： django

【解决方案1】：

是的，如上所述，添加 px 或 % 应该可以：

style="width: {{ perc_value }}px"

您还可以添加一个类，例如：

class="{{ perc_value }}percentcomplete"

这将变成 80% 完成，然后您可以在 CSS 中配置每个类。另一种选择是使用 Bootstrap 宽度类，例如：

w-25、w-50、w-75、w-100 但您需要在视图中应用额外的逻辑以仅返回四个值，这取决于进程的进度。

【讨论】：

“类”解决方案不可行，因为我需要将每个百分比从 1 映射到 100。

【解决方案2】：

尝试在 {{ perc_value}} 之后添加 % 或 px，如下所示。

<div class="progress progress-xl mb-2"> 
    <div class="progress-bar" role="progressbar" style="width: {{ perc_value }}%">{{ perc_value }}%</div>
</div>

【讨论】：

谢谢，我发现我传递了80,0%所以这是一个格式问题。

【解决方案3】：

你看起来很亲密。我要做的第一件事是将{{ perc_value }} 替换为“80”。它有效吗？如果没有，我会放 80px 或 80% 之类的。我的意思是，让它以你想要的方式在屏幕上显示静态值。

接下来，使用模板中的调试语句或查看调试工具栏以确保 perc_value 被传递，它具有正确的值和正确的类型。您可能正在设置上下文但实际上并未通过请求发送它。没有全景就很难看到。

【讨论】：