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

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

一 点睛

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 定义的位置

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

2 设置的位置

var totalPayMoneyOfLastyear = result.payBillSumOfLastYear.plusYearPayMoney + result.payBillSumOfLastYear.yearPayMoney
if (totalPayMoneyOfLastyear != 0) {
    ratio = result.payBillSumOfLastYear.yearPayMoney / totalPayMoneyOfLastyear;
    document.getElementById("quotaUsageLastyear").innerText = ratio; // 给 span 赋值
    var color;
    if (ratio < 0.8) {
        color = "green";
    } else if (ratio >= 0.8 && ratio < 1) {
        color = "blue";
    } else {
        color = "red";
    }
    document.getElementById("quotaUsageLastyear").style.color = color; // 给 span 设置颜色
}

三 测试效果

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

如果修改为下面代码

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

展示效果如下:

相关文章