検索

ホームページ  >  に質問  >  本文

プログレスバーのカスタム範囲を設定する

進行状況バーがパーセンテージで表示されるようになりました。 %から範囲スケールに変更したいと思います。

分: 0 最大: 10

これは %:

に適用されます

<リンク rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<div class="進捗状況">
  <div id="test" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%"></div>
</div>

ただし、% から値の範囲に変更したいと考えています。

##更新

aria-value を持つものは機能しません。何故かはわからない。

解決策を見つけました。回答に基づいてパーセンテージを計算しました:

var 計算 = データ[1] / 10 * 100

P粉567112391P粉567112391276日前386

全員に返信(1)返信します

  • P粉588152636

    P粉5881526362024-02-27 12:41:49

    style="width: 100%" を任意の % に変更できます。これはバーの % ではなく、内側の青いバーの幅です。ブートストラップを使用しているようです。この進行状況バーについては、https://getbootstrap.com/docs/5.1/components/progress/

    で確認できます。

    列に aria プロパティを指定して、最小値と最大値を指定することもできます。 (上のリンクからもご覧いただけます)

    例: aria-valuenow="0" aria-valuemin="0" aria-valuemax="10"

    ###。進捗{ 幅: 300ピクセル; マージン: 20px; }
    
      

    aria 値の例 (Bootstrap ドキュメントからコピー):

    ###。進捗{ マージン: 20px; 幅: 300ピクセル; }
    
    
      

    返事
    0
  • キャンセル返事