js 对 span 的读写操作及修改 span 字体颜色

x33g5p2x  于2022-01-13 转载在 其他  
字(1.1k)|赞(0)|评价(0)|浏览(436)

一 点睛

1 js 给 span 赋值

document.getElementById("span_id").innerText = someVal;

2 js设置 span 字体颜色:

document.getElementById("span_id").style.color="green";

3 js 获取 span 的值:

document.getElementById('span_id').innerText;

二 实战

1 span 定义的位置

  1. <labal style="${session_accoutInfo.userType eq 1?'':'display:none'}">&nbsp;&nbsp;去年年度配额使用情况:<span
  2. id="quotaUsageLastyear"></span>
  3. </labal>

2 设置的位置

  1. var totalPayMoneyOfLastyear = result.payBillSumOfLastYear.plusYearPayMoney + result.payBillSumOfLastYear.yearPayMoney
  2. if (totalPayMoneyOfLastyear != 0) {
  3. ratio = result.payBillSumOfLastYear.yearPayMoney / totalPayMoneyOfLastyear;
  4. document.getElementById("quotaUsageLastyear").innerText = ratio; // 给 span 赋值
  5. var color;
  6. if (ratio < 0.8) {
  7. color = "green";
  8. } else if (ratio >= 0.8 && ratio < 1) {
  9. color = "blue";
  10. } else {
  11. color = "red";
  12. }
  13. document.getElementById("quotaUsageLastyear").style.color = color; // 给 span 设置颜色
  14. }

三 测试效果

因为值为 0.864,所以显示蓝色。

如果修改为下面代码

  1. document.getElementById("quotaUsageLastyear").innerHTML = '<strong>' + toPercent(ratio) + '</strong>';

展示效果如下:

相关文章