Javascript 如何更改附加元素的颜色？

我创建了一个“customappend”函数，它接受两个参数并将它们的值附加到一行中。 我需要将第一个参数的值附加为灰色，但第二个值必须保持原样。 我尝试使用“css（属性，名称）”函数，但没有成功。 我的谬论在哪里？如何得到所需的结果

var showText=function（who，str）{
如果（str！==“”）{
var colorWho=who.name；
css（“颜色”、“灰色”）；
$（“#故事板”）。追加（“
”+colorWho+”：“+str+”
”）；
var元素=document.getElementById（“故事板”）；
element.scrollTop=element.scrollHeight；
}
};

这是您需要的吗

$("#storyBoard").append("<br><span style='color:gray;'>" + colorWho + "</span>: " + str + "<br>");

$（“#故事板”）。追加（“
”+colorWho+”：“+str+”
”）；

给你

CSS

JS

var showText=function（who，str）{
如果（str！==“”）{
var colorWho=who.name；
$（“#故事板”）。追加（“”+colorWho+”：“+str+””）；
}
};
var obj={
姓名：“传教士”，
}
showText（obj，“是一本很棒的漫画书！”）；

附加元素应该是

DOM

组件，如

div

或

span

。例如，

+who.name+

这里混合了JS和jQuery。请给出一个更完整的HTML标记示例，以及如何实际调用此方法。似乎

who

是一个至少拥有

名称

属性的对象。

p > span {          /* If you're going to take this to a larger environment, you may want to use classes instead */
  color:gray;
}

var showText = function(who, str) {
  if(str !== ""){
    var colorWho = who.name;
  $("#storyBoard").append("<p><span>"+colorWho + "</span>: " +str+ "<p>");
}

};

var obj = {
    name : "Preacher",
}

showText(obj, "Is an awesome comic book !");