无法更改javascript中的特定文本颜色

时间:2016-12-21 17:06:54

标签: javascript jquery html css frontend

这是我的代码。这是一个简单的函数,当我显示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'。结果是数据/文本根本不会显示出来。

我做错了什么?

提前感谢您的帮助!

2 个答案:

答案 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>