如何使用Django动态修改CSS中的宽度变量？

这里提供几种直接落地的方法，帮你通过Django动态修改进度条的宽度：

方案1：内联样式直接渲染 #

把CSS里固定的width移到HTML元素的内联样式中，用Django模板变量传递数值：

修改后的HTML模板 #

<div class="container">
  <h2 class="my-skills">My Skills</h2>
  <div class="bar-1">
    <div class="title">HTML5</div>
    <div class="bar" data-width="{{ html_skill_percent }}%">
      <div class="bar-inner1" style="width: {{ html_skill_width }}px;">
      </div>
      <div class="bar-percent">{{ html_skill_percent }}%</div>
    </div>
  </div>
</div>

简化后的CSS（移除固定width） #

.bar-inner1 {
  height: 35px;
  line-height: 35px;
  background: #db3a34;
  border-radius: 5px 0 0 5px;
}

视图层传参 #

在Django视图里计算好宽度值（比如按百分比换算像素），传给模板：

def my_profile(request):
    # 示例：HTML技能熟练度65%，假设进度条容器总宽度是860px（根据你的布局调整）
    html_skill_percent = 65
    container_total_width = 860
    html_skill_width = int(container_total_width * (html_skill_percent / 100))
    return render(request, 'profile.html', {
        'html_skill_percent': html_skill_percent,
        'html_skill_width': html_skill_width
    })

方案2：data属性+JS动态设置 #

保留现有CSS结构，用Django渲染data-width的百分比，再通过JS自动设置宽度：

HTML模板代码 #

<div class="container">
  <h2 class="my-skills">My Skills</h2>
  <div class="bar-1">
    <div class="title">HTML5</div>
    <div class="bar" data-width="{{ html_skill_percent }}%">
      <div class="bar-inner1">
      </div>
      <div class="bar-percent">{{ html_skill_percent }}%</div>
    </div>
  </div>
</div>

<script>
// 页面加载完成后设置进度条
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.bar').forEach(bar => {
    const percent = bar.getAttribute('data-width');
    bar.querySelector('.bar-inner1').style.width = percent;
  });
});
</script>

视图层传参 #

只需要传递百分比数值即可：

def my_profile(request):
    html_skill_percent = 65
    return render(request, 'profile.html', {'html_skill_percent': html_skill_percent})

这种方法不用手动计算像素，适配性更强，适合多技能条的场景。

方案3：动态生成CSS块 #

如果有多个技能条需要统一管理，可以直接在模板里用Django变量渲染CSS：

HTML模板中的动态CSS #

<style>
.bar-inner1 {
  width: {{ html_skill_width }}px;
  height: 35px;
  line-height: 35px;
  background: #db3a34;
  border-radius: 5px 0 0 5px;
}
/* 其他技能条的样式也可以按这个方式动态生成 */
</style>

<div class="container">
  <h2 class="my-skills">My Skills</h2>
  <div class="bar-1">
    <div class="title">HTML5</div>
    <div class="bar" data-width="{{ html_skill_percent }}%">
      <div class="bar-inner1">
      </div>
      <div class="bar-percent">{{ html_skill_percent }}%</div>
    </div>
  </div>
</div>

视图层传参 #

和方案1的视图代码一致，计算好像素宽度后传递给模板即可。

内容的提问来源于stack exchange，提问作者Daniel Smith