在进度条之外显示投票进度条的百分比答案

【问题标题】：Showing the percentage of poll's progress bar outside progress bar在进度条之外显示投票进度条的百分比
【发布时间】：2012-06-09 21:01:52
【问题描述】：

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

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

我尝试了很多方法，这让我发疯了。我也用谷歌搜索过，但大多数结果都是使用 jQuery 得出的，我不应该将其用于我的作业（仅 CSS、HTML 和 PHP）。

非常感谢您的帮助。

【问题讨论】：

你需要 JavaScript。这对于纯 CSS 是不可能的。
感谢您的回答！但是，呃，PHP 和 JavaScript 不一样，对吧？我也可以使用 PHP 来完成我的作业。
没有 PHP（服务器端）与 JavaScript（客户端）完全不同。但它也可以在 PHP 中解决。

标签： php html css

【解决方案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>

然后您可以查询百分比数字元素并使用 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;

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

【讨论】：

哦，我没看到你不能使用 javascript。是的，您可以将百分比的文本放在 PHP 模板中。像这样：
%
谢谢你！有用！！我现在可以完成我的任务并安然入睡了哈哈。