如何在NodeJs express应用程序中使用的HTML模板中动态更改样式的“宽度”

我正在尝试动态设置一个HTML模板中用作彩色条的宽度值，我使用该模板生成一些PDF。 我可以使用类似{my_value}}的东西设置其他值，但是在样式中使用类似的东西似乎不起作用

我尝试使用宽度：{{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>

如果POST val1=20%，我希望看到彩色条仅填充20%，并且在其上也写有百分比。

---

目前，我可以将百分比写在条上，但它只是用一种颜色填充整个条。

假设您的服务器答案提供了百分比值：百分比。您可以从JS更改大小，如下所示

您可以使用以下命令更新JS文件的大小： document.getElementByIdmyDiv.style.width='50px'

以下是一个基本想法：

document.getElementByIdupdateLoadBar.onclick=函数{ 阿迪隆巴酒店 }; 函数updateLoadingBar{ //获取输入值 //在您的情况下，您可以从模板中获取此值，例如： //宽度={{百分比}}； var width=document.getElementByIdinput-number.value； //设置暗蓝色宽度 document.getElementByIdmyBar.style.width=width+'%'； //避免文本重叠 如果宽度>=5{ //设置文本 document.getElementByIdtext.textContent=宽度+%； } } .我的按钮{ 边界半径：5px； } 我的进展{ 宽度：100%； 高度：40px； 边缘顶部：10px； 背景颜色：浅蓝色； } 我的酒吧{ 宽度：1%； 身高：100%； 背景色：深蓝色； 显示器：flex； 对齐项目：居中； 证明内容：周围的空间； } 选择一个介于0和100之间的数字：

---

嗨，不幸的是，看起来我无法在HTML中运行任何类型的JS脚本来进行这些更改。HTML从未实际运行过，只是用作：var templateHtml=fs.readFileSyncHTML-FILE，'utf8'；，抱歉，如果不清楚，那么如果您构建HTML页面，您可以将Javascript和CSS块插入。复制过去的js脚本之间的。。。你的JS代码。CSS样式也是如此：。。。CSS代码。不确定答案？我自己并没有构建HTML模板，但是你的评论确实帮助我以不同的方式思考这个问题，并为我找到了一个解决方案。在my JS中创建并使用template.replace将其引入HTML，因此非常感谢您的帮助。请随意接受答案：

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

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