javascript - CSS - 如何将使用 "innerHTML"编写的字符串的颜色设置为 div

Question

我目前有一个函数可以将字符串数组输出到 html 页面中。如何设置输出文本的颜色？这是写入页面的代码:

function showErrors() {
    if (errList.length >= 1)
    document.getElementById("errorsSpace").innerHTML = errList.join('<br/>');
}

我试过使用“颜色:红色”，但没有成功。我收到一条错误消息“无法将属性‘innerHTML’设置为 null”

这是其余代码的 jsfiddle:https://jsfiddle.net/wd6fpgm6/

Answer 1

尝试以下操作 - 将数组转换为包含 html 和在 CSS 中设置样式的错误类的字符串 - 然后将整个字符串插入到 hhtml 中并具有正确的结构和样式:

//CSS
.error{color:red}

//js
function showErrors() {
    var errors ="";
    if (errList.length >= 1)
      {
        for(i=0;i<errList.length;i++){
         errors+="<p class='error'>" + errList[i] + "</p>;";
          }
        document.getElementById("errorsSpace").innerHTML = errors;
      }
}

//result will be 

<div id='errorsSpace'>
    <p class='error'>Error 1</p>;
    <p class='error'>Error 2</p>;
    <p class='error'>Error 3</p>;
</div>

你甚至可以省略 p 上的 class="error"并让 css 为:

#errorsSpace p{color:red}