javascript - 当页面最初加载时，如何根据文本的值更改文本的颜色？

Question

我正在编写一个 Spring 程序，其中一个方面是犯罪评级功能。根据用户输入、API 查询和一些计算，我可以得出 10 分的评分。像这样(Garda Station 是爱尔兰的警察局)

我认为如果数字的颜色发生变化会有一个很酷的功能，即低分变为绿色，高分变为红色等。我正在我的 Spring 应用程序中的 Controller 类中打印此信息。我尝试了以下方法:

我在 <b> 中添加了一个 id标记将值传递给 javascript 变量，如下所示:

<c:forEach var="o" items="${gardaStationList}">
        <tr>
            <td width="10%" height="50"><h2>Based on <b><c:out value="${o.gardaStation_name}" /></b> and their statistics
                                            the rating for this area is:  <b id = "rating"><c:out value="${o.crime_rating}" /></b></h2></td>  

         </tr>
    </c:forEach>

当页面加载时，我让它运行以下 javascript 函数，但我感觉它在加载评级之前执行此函数，所以它不起作用？

window.onload = function() {
  var rating = document.getElementById('rating').value;
  if (rating < 4) {
    document.getElementById("rating").style.color = "#45FD00";
  } else if (rating > 4 && rating < 6) {
    document.getElementById("rating").style.color = "#E6E6E6";
  } else if (rating > 6) {
    document.getElementById("rating").style.color = "#ff0000";
  }
}

有没有一种方法可以在文本加载后运行该函数，还是我这样做完全错误？

Answer 1

您走在正确的轨道上，但只有表单字段元素具有 .value 属性。常规元素具有 .textContent 属性。

代替b，使用span，它更适合包含一些内联内容。要使某样东西的样式更大胆，请使用 CSS。

接下来，为每个将包含您需要的数据的元素提供一个通用的 CSS 类名称，以便将它们组合在一起，而不是在各种元素上使用唯一的 id。这使得将它们全部收集起来或稍后添加更多变得非常容易，而无需更改您的 JavaScript。

此外，使用 CSS 类而不是创建动态内联样式，因为类更灵活并且允许您使用 element.classList 对象，这使得添加、删除和切换类变得容易。

// When all the HTML has been parsed and is available...
window.addEventListener("DOMContentLoaded", function() {
  // Get all the ratings into an array
  var ratings = Array.prototype.slice.call(document.querySelectorAll('.rating'));
  
  // Loop over the array
  ratings.forEach(function(r){
    // Get the text that is inside the element
    var val = +r.textContent; // The prepended + converts the text to a number

    // Just add the appropriate pre-made CSS class to the element
    // depending on its text content.
    if(val < 4 ){
      r.classList.add("low");
    } else if(val >= 4 && val <= 6){
      r.classList.add("medium");
    } else if(val > 6){
      r.classList.add("high");
    }
  });
});

.rating { font-weight:bold; }
.low { color:#45FD00; }
.medium { color:#880; }
.high { color:#ff0000; }
td { width:10%; height:50px; }

<table>
   <tr>
     <td><h2>Based on statistics the rating for this area is:  <span class="rating">10.04</span></h2></td>  
   </tr>
   <tr>
     <td><h2>Based on statistics the rating for this area is:  <span class="rating">5.4</span></h2></td>  
   </tr>  
   <tr>
     <td><h2>Based on statistics the rating for this area is:  <span class="rating">0.4</span></h2></td>  
   </tr>    
</table>