如何使用 Javascript 更改 class 的颜色

Question

我从 Firebase 获取所有电影数据，还获得了电影的分数。 如果电影的分数高于 70，那么我将 class 的颜色更改为“深天蓝色”，如果它是 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>

我的网站

控制台.log(i)

Answer 1

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

Answer 2

您可以给它一个唯一的 ID，而不是选择名称为 class 的元素。 对于第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);