Question

我正在根据希望从数据库中捕获的值来制作进度条。而从此处开始，它由div style = width：“？％”确定，以确定进度条的长度。如何从数据库中获取该值并输入其中？

<div class="container">
 <h2>Basic Progress Bar</h2>
  <div class="progress">
   <div class="progress-bar" role="progressbar" aria-valuenow="70" aria- 
   valuemin="0" aria-valuemax="100" style="width:70%">
   70% Complete
  </div>
 </div>
</div>

Answer 1

取决于您如何从数据库中读取值。如果使用PHP，则可以直接在HTML代码中直接编写PHP变量。

例如：

<?php echo $percent; ?>

Answer 2

首先，为您的div分配一个id，以便可以使用JavaScript轻松识别它。

<div id="yourDiv" class="progress-bar" role="progressbar" aria-valuenow="70" aria- 
valuemin="0" aria-valuemax="100" style="width:70%"> <!-- Default to width: 70% -->

在您从数据库中获取数据的JavaScript部分中，将此称为

document.getElementById("yourDiv").style.width = divPercentFromDatabase; // Example*   = "70%"

执行该行后，您的div的宽度将根据在那里指定的变量进行更改。

Answer 3

您可以通过使用JavaScript更改style.width属性来更改元素的宽度。

funcion changeWidth(newWidth) {
var progressBar = document.propertySelector('progress-bar');
progressBar.style.width = newWidth + '%';
};

如何将div样式更改为数据库中的值？

3 个答案: