cssとjsでレビューの星を動的に作る

0.5刻みで動的に星の数を変えていきます。

基本のHTML

基本のHTMLは以下の通り。

reviewNumの中の数字が変わったら

その数字に合わせてグレーの星をオレンジの星に塗りつぶします。

<!-- 1~5までの数字を入れてね↓-->
<p id="reviewNum" class="reviewNum">4.2</p>

<div class="star">
  <p class="star_grey">★★★★★</p>
  <p id="star_color" class="star_color">★★★★★</p>
</div>

必要最低限のスタイルを書く

CSSSASS

.star {
  position: relative;
  z-index: 0;
  display: inline-block;
  white-space: nowrap;
}
.star_grey {
  color: grey;
}
.star_color {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: orange;
}

*sassで書いているので必要な方はscssに書き換えてください

.star
  position: relative
  z-index: 0
  display: inline-block
  white-space: nowrap
  &_grey
    color: grey

  &_color
    position: absolute
    z-index: 1
    top: 0
    left: 0
    overflow: hidden
    white-space: nowrap
    color: orange

cssで星を作る考え方

①positionプロパティを使って、グレーの星の上にぴったりオレンジ色の星を重ね合わせます。

②オレンジ色の星(.star_color)のwidthを指定することでグレーの星をオレンジ色にすることができます。動的にするためにJSを使っていきます。

星の数をJSで動的に変化させる

考え方

レビューの評価点数が何点なのかを取得する
オレンジの星のidを取得し、date属性(data-rate)の値を付与する
星は5点満点なので、widthに評価点数(reviewNum)*20%の計算式を入れてあげる

星を自在にオレンジ色に変える

<script>  
 	  // レビューの点数を取得し、星の表示を調整
      const reviewNum = parseFloat(
        document.getElementById("reviewNum").textContent
      );
      const starColor = document.getElementById("star_color");

      // 0.5刻みで点数を丸めてrateを設定
      const roundedReviewNum = Math.floor(reviewNum * 2) / 2;
      starColor.dataset.rate = roundedReviewNum;

      // 星の幅をrateに応じて設定
      starColor.style.width = roundedReviewNum * 20 + "%";
</script>

この書き方だと、動的に星1から星5まで(0%から100%まで)オレンジの星を自在に操ることができます。(すごい！)

parseFloat

parseFloatの使用: textContentで取得した数値を浮動小数点数として扱うためにparseFloatを使用しました。

星の評価を0.5刻みにする

0.5刻みでの丸め: Math.floor(reviewNum * 2) / 2で0.5刻みの丸め処理をします。

datasetの使用

datasetを使用するとhtmlにdata-◯◯をセットすることができます。

今回はdataset.rateとしているのでhtml内ではdata-rate="◯"になります。

<p id="star_color" class="star_color" data-rate="4">★★★★★</p>

オレンジの星の範囲をwidthで変える

<p id="star_color" class="star_color" style="width: 80%;">★★★★★</p>

—

最後にid=”reviewNum”の中の数字を手動で切り替えてみて、正常に動いているか確認しましょう！