javascript - 使用 jquery 将变量作为百分比插入到 css 中

Question

所以我试图制作动态图表，所以我需要使用jquery来定义css中div的宽度。我遇到的唯一问题是宽度需要为百分比。任何想法或想法都会很棒。在 fiddle 中，内部 div 应该为 93%，并且显示为 93px

var TotalSites = document.getElementById("ctl00_ContentBody_ctl0_lblTotalSites").innerHTML;
var QuestionnairesSent = document.getElementById("ctl00_ContentBody_ctl0_lblQuestionnairesSent").innerHTML;
var Sent = QuestionnairesSent / TotalSites * 100;

$('.inner').css("width", Sent);

.graph {
  display: block;
  width: 200px;
  height: 60px;
  background-color: #666;
  float: left;
}

.inner {
  height: 60px;
  background-color: #333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="graph">
  <div class="inner">
  </div>
</div>
<span id="ctl00_ContentBody_ctl0_lblTotalSites">15</span> /
<span id="ctl00_ContentBody_ctl0_lblQuestionnairesSent">14</span>

这是我的 fiddle 链接 https://jsfiddle.net/SCATORY/pzzt390m/1/

Answer 1

    $('.inner').css("width", Sent + "%");

CSS 评估将所有内容解析为字符串，因此您可以将宽度设置为 93. 93px、93% 等。当没有后缀时，它只是默认为 px。