html - 如何动态更改 NodeJs Express 应用程序中使用的 HTML 模板中样式的 "width"

Question

我正在尝试为 <div> 动态设置宽度值在我用来生成一些 PDF 的 HTML 模板中用作彩色条。我可以使用 {{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例如，如果您在元素中使用 Bootstrap 。希望对您有所帮助。