0

私は自分のWeb割り当てにこのコードを使用しています：http：
//csstechniques.blogspot.sg/2007/05/super-simple-css-bars.html

しかし、次のようにプログレスバーの外側のバーのパーセンテージを表示するにはどうすればよいここに画像の説明を入力してくださいですか？

私は多くの方法を試しました、そしてそれは私を狂わせています。私もグーグルで検索しましたが、ほとんどの結果はjQueryを使用して表示されます。これは、割り当てに使用することは想定されていません（CSS、HTML、およびPHPのみ）。

助けてくれてありがとう。

4

1 に答える 1

2

あなたの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 ドキュメントでquerySelector、 querySelectorAll、getElementById、getElementsByTagName などを確認してください。これでかなり助かります。ちなみに、querySelector と querySelectorAll は、最新のブラウザー (IE8+ を含む) でのみ機能します。これが、人々が jQuery を使用してこのようなことを行う理由の 1 つです。

于 2012-06-09T21:18:37.797 に答える