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

// 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>