как мне изменить мой стиль div на значение из моей базы данных?

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

Во-первых, присвойте свой div идентификатору, чтобы его можно было легко идентифицировать с помощью 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 2

Вы можете изменить ширину вашего элемента, изменив свойство style.width с помощью JavaScript.

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

Answer 3

Зависит от того, как вы читаете значения из вашей базы данных. Если вы используете PHP, вы можете просто написать PHP-переменную прямо в своем HTML-коде.

Например:

<?php echo $percent; ?>