用变量设置“style=width:”答案

【问题标题】：set "style=width: " with variable用变量设置“style=width:”
【发布时间】：2018-12-13 20:40:31
【问题描述】：

我正在使用

    <div class="progress">
      <div class="progress-bar bg-success" role="progressbar"    style="width:100%" th:attr="aria-valuenow=${progress}" aria-valuemin="0" aria-valuemax="100">
      </div>
    </div>

我想改变 style="width:100% 并使用像 model.addAttribute("percent", "100") 这样的变量进入控制器。

我该如何改变呢？

谢谢。

【问题讨论】：

标签： spring spring-mvc model-view-controller thymeleaf

【解决方案1】：

您需要使用 aria-valuenow 属性

$(function() {
  var current_progress = 0;
  var interval = setInterval(function() {
      current_progress += 10;
      $("#dynamic")
      .css("width", current_progress + "%")
      .attr("aria-valuenow", current_progress)
      .text(current_progress + "% Complete");
      if (current_progress >= 100)
          clearInterval(interval);
  }, 1000);
});

.progress {
  margin: 10px;
  width: 700px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<h3>Dynamic Progress Bar</h3>
<p>Running progress bar from 0% to 100% in 10 seconds</p>
<div class="progress">
  <div id="dynamic" class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
    <span id="current-progress"></span>
  </div>
</div>

【讨论】：