Как динамически изменить «ширину» стиля в шаблоне HTML, используемом в экспресс-приложении NodeJs

Question

Я пытаюсь динамически установить значение ширины для <div>, который используется в качестве цветной полосы в шаблоне HTML, который я использую для создания некоторых PDF-файлов. Я могу установить другие значения, используя что-то вроде {{my_value}}, но использование в стиле, похожем на это, похоже, не работает.

Я пытался использовать width: {{my_value}}%. Я также попытался установить значение, присвоив div классу, т.е. .divClass { "width": {{my_value}} }

HTML-шаблон:

<!-- Change the width dynamically to same value as {{my_value}} -->
<div style="width: 45% !important;">
<!-- Dynamic percentage below and above -->
<div style="padding-left:8px;">{{my_value}}%</div>
</div>

Файл JS содержит ниже

// Get the value from the POST
var val1 = req.body.val1;

//replace the value in the template
templateHtml = templateHtml.replace('{{my_value}}', val1);

Если POST val1 = 20% Я бы хотел видеть, что цветная полоса <div> заполнена всего на 20% и имеет процент, записанный на ней. На данный момент я могу записать процент на столбец, но он просто заполняет весь столб цветом.

Answer 1

Предполагая, что ваш ответ сервера предоставляет процентное значение: percentage. Вы можете изменить размер с JS, как показано ниже.

Вы можете обновить размер <div> в файле JS с помощью: document.getElementById("myDiv").style.width = '50px';

Вот основная идея:

document.getElementById("updateLoadBar").onclick = function() {
    updateLoadingBar()
};

function updateLoadingBar() {
    // Get input value
    // In your case your get this value from your template like this for example:
    // width = {{ percentage }};
    var width = document.getElementById("input-number").value;
    // Set darkBlue width
    document.getElementById("myBar").style.width = width + '%';

    // Avoiding that text overlap
    if (width >= 5) {
        // set text
        document.getElementById("text").textContent = width + "%";
    }
}

.myButton {
  border-radius: 5px;
}

#myProgress {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  background-color: lightblue;
}

#myBar {
  width: 1%;
  height: 100%;
  background-color: darkblue;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

Select a number between 0 and 100:
<input id="input-number" type="number">
<input id="updateLoadBar" type="button" value="Update load bar" class="myButton">


<div id="myProgress">
  <div id="myBar">
    <div id="text">
    </div>
  </div>
</div>

Вы можете найти готовые примеры: pure JS или bootstrap examples, если вы используете bootstrap в своем проекте. Надеюсь, это поможет.