如何使用 Javascript 更改类的颜色答案

【问题标题】：How to change color of a class with Javascript如何使用 Javascript 更改类的颜色
【发布时间】：2022-01-25 13:46:56
【问题描述】：

我从 Firebase 获取所有电影数据，还获得了电影的分数。如果电影的分数高于70，那么我将类的颜色更改为“deepskyblue”，如果它是50或更高将是“橙色”，如果它低于50将是“深红色” （红色的）。当我这样做时，它只会改变我第一部电影的班级颜色。但我想改变所有这些。我该怎么做？

var movieNo = 0;
let html = '';
var body = document.getElementById('editor');
var body2 = document.getElementById('week');

function AddItemsToTable(name, score, img, id) {
  var movies = `<div class="content"><img src="${img}" ><p><a href="Admin.html?movieId=${id}">${name}</a></p> <p> <i class="fa fa-star" id="star"></i>&nbsp;<a class="scoretxt">${score}</a> </p> </div>`;
  html = movies;

  body.innerHTML += html;
  body2.innerHTML += html;

}


function AddAllItemsToTable(TheMovies) {
  movieNo = 0;
  var counter = 0;

  TheMovies.forEach(element => {
    if (counter === 6) {
      return;
    }
    AddItemsToTable(element.movieName, element.movieScore, element.movieImage, element.movieId);
    var i = document.getElementsByClassName("fa fa-star")[element.movieId];
    console.log(i);
    if (element.movieScore >= 70) {
      i.style.color = "deepskyblue"; //good movie

    } else if (element.movieScore >= 50) {
      i.style.color = "orange"; //not bad
    } else {
      i.style.color = "crimson"; //bad movie
    }

    counter++;

  });

}

function getAllDataOnce() {
  const dbRef = ref(db);
  get(child(dbRef, "Movies"))
    .then((snapshot) => {
      var movies = [];
      snapshot.forEach(childSnapshot => {
        movies.push(childSnapshot.val())
      });
      AddAllItemsToTable(movies);
    });
}
window.onload = getAllDataOnce;

<div class="body" id="body">

  <div class="baslik">Opening This Week</div>
  <div class="baslik2"><a href="series.html">See all</a></div>
  <div id="week">

  </div>
  <div class="baslik">Editor's Picks</div>
  <div class="baslik2"><a href="movies.html">See all</a></div>
  <div id="editor">

  </div>


</div>

我的网站

Console.log(i)

【问题讨论】：

标签： javascript html firebase

【解决方案1】：

您可以使用 style="color:"desired color name/hexcode" 最简单的方法来更改颜色

【讨论】：

【解决方案2】：

您可以给它一个唯一的 id，而不是选择具有类名的元素。对于i 标签，您可以提供 ID，例如 id="star${id}"

function AddItemsToTable(name, score, img, id) {
  var movies = `<div class="content"><img src="${img}" ><p><a href="Admin.html?movieId=${id}">${name}</a></p> <p> <i class="fa fa-star" id="star${id}"></i>&nbsp;<a class="scoretxt">${score}</a> </p> </div>`;
  html = movies;

  body.innerHTML += html;
  body2.innerHTML += html;

}

 AddItemsToTable(element.movieName, element.movieScore, element.movieImage, 
 element.movieId);
 var i = document.getElementById("#star"+element.movieId);

【讨论】：