Могу ли я использовать Django таким образом, чтобы изменять переменные CSS?

Я создаю личный сайт и у меня есть индикатор выполнения, который был сделан в css и html.

для управления прогресс-барами все, что мне нужно сделать, это изменить переменную (ширину). Вот код для одной полосы:

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

Вот соответствующий html, на который влияет этот css:

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

    </div>
    <div class="bar-percent">65%</div>
  </div>
  </div>

Как мне использовать Django для изменения ширины переменной?

Я просмотрел документацию и учебники, но не могу разобраться с этим.

Для этого вы можете использовать встроенный CSS. Просто используйте в inline css то же самое, что и в HTML.

Вы можете использовать Django для генерации начальной ширины прогресс-бара, используя данные Context и логику Template, но после отправки страницы клиенту Django уже не сможет повлиять на это...
. Вам придется использовать Javascript/Jquery, а если вам действительно нужно какое-то значение от Django, вы будете пинговать сервер с помощью Ajax или обновлять страницу.

Вы можете использовать встроенный CSS для изменения width, например

<div class="container">
  <h2 class="my-skills">My Skills</h2>
  <div class="bar-1">
  <div class="title">HTML5</div>
  <div class="bar" data-width="65%">
    <div class="bar-inner1" style="width: {{ progress|default:0 }}%;">

    </div>
    <div class="bar-percent">{{ progress|default:0 }}%</div>
  </div>
  </div>

Здесь нужно задать ширину родителя div в некоторых 'px' и цвет фона прогресса будет корректным в соответствии с его процентами

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

Если переменная progress не передается в контексте, то ее значение должно быть None, чтобы заменить его на 0 я использовал предопределенный тег шаблона default

Вернуться на верх