这是我的代码。这是一个简单的函数,当我显示Active
eventStatus时,我需要更改文本颜色:
function() {
var diff, status;
diff = moment().diff(date, 'days')
if (diff > 0) {
status = 'Ended';
}
if (diff < 0) {
status = 'Pending';
}
if (diff === 0) {
status = 'Active';
//status.style.color = "#132111"
// document.getElementById('greenActive').style.color = "green"
}
return status;
}
更新 HTML:
<td id = "status-column" >
<span id="greenActive" >{{eventStatus}}</span>
</td>
我尝试同时使用'status.style.color'和'getElementById'。结果是数据/文本根本不会显示出来。
我做错了什么?
提前感谢您的帮助!
答案 0 :(得分:0)
修改强>
您的代码正常工作,但正如我所说,您需要确保在DOM加载后执行代码
(function() {
var diff, status;
diff = 0
if (diff > 0) {
status = 'Ended';
}
if (diff < 0) {
status = 'Pending';
}
if (diff === 0) {
status = 'Active';
document.getElementById('greenActive').style.color = "green"
}
return status;
})();
<td id = "status-column" >
<span id="greenActive" >{{eventStatus}}</span>
</td>
在调用函数之前,您需要确保加载的文档和您尝试修改的DOM元素可用。您可以看到js修改文本颜色here
的演示答案 1 :(得分:0)
function() {
var diff, status , statusColor = '';;
diff = moment().diff(date, 'days')
if (diff > 0) {
status = 'Ended';
}
if (diff < 0) {
status = 'Pending';
}
if (diff === 0) {
status = 'Active';
statusColor = '#5CB85C';
//status.style.color = "#132111"
// document.getElementById('greenActive').style.color = "green"
}
return <div style="background-color:'+statusColor+'">'+status+'</div>;
}
<td id = "status-column" >
<span id="greenActive" >{{eventStatus}}</span>