显示进度条外部的民意调查进度条的百分比

Question

我正在使用此代码进行网络分配：
http://csstechniques.blogspot.sg/2007/05/super-simple-css-bars.html

但是如何在进度条之外显示条形图的百分比，如下所示：？

我尝试了很多方法＆amp;它让我疯了。我也用谷歌搜索，但大多数结果出现使用jQuery，我不应该用于我的任务（只有CSS，HTML和PHP）。

非常感谢您的帮助。

Answer 1

你的HTML是这样的：

<div class="progress-container">
  <div style="width:95%"></div>
</div>

您需要其他元素才能显示百分比文字，如下所示：

<div class="progress-container">
  <div style="width:95%"></div>
</div>
<p class="percentage-text">
  <span class="percentage-number">95</span>%
</p>

然后您可以查询percentage-number元素并使用JavaScript更改文本：

var number = 95; // this is the same number you are using to change the graph.
var perc = document.querySelector(".percentage-number");
perc.innerHTML = number;

在querySelector中查看MDN documentation，querySelectorAll，getElementById，getElementsByTagName等。这将对你有所帮助。顺便说一下，querySelector和querySelectorAll仅适用于现代浏览器（包括IE8 +）。这是人们使用jQuery来做这些事情的原因之一。