如何使用CSS将JS对象转换为HTML和样式

Question

我正在学习JSON（或JS对象），并且试图弄清楚如何将所述对象引入HTML并使用CSS设置其样式。

如何选择'firstName'和'lastName'对象设置样式？

这是小提琴： http : //jsfiddle.net/frankDraws/5bfzo1q2/25/

 var data = { "users":[ { "firstName":"Jack", "lastName":"Lewis", "startDate": { "month":"January", "day":12, "year":2000 } }, { "firstName":"Raymond", "lastName":"Girard", "startDate": { "month":"April", "day":28, "year":1994 } }, { "firstName":"Enrique", "lastName":"Sosa", "startDate": { "month":"October", "day":14, "year":2004 } } ]} var output="<ul>"; for (var i in data.users) { output+="<li>" + data.users[i].firstName + " " + data.users[i].lastName + " &ndash; " + data.users[i].startDate.month + " " + data.users[i].startDate.day + ", " + data.users[i].startDate.year+ "</li>"; } output+="</ul>"; document.getElementById("writeTo").innerHTML=output; 

 @import url(http://fonts.googleapis.com/css?family=Roboto); body { background: MediumTurquoise; font: normal 17px/1.8em Roboto, Helvetica, sans-serif; } div { box-shadow: 0 3px 5px darkcyan; background: gainsboro; border-radius: 5px; margin: 30px auto 0; max-width: 300px; max-height: 200px; padding:20px; } ul { margin: 0; padding: 0; } ul li { color: #555; list-style:none; } .firstName :first-child { font-weight:bold; } 

 <div id="writeTo"></div> 

Answer 1

您不能使用CSS选择JSON。 它在DOM上运行。

看来您并未尝试。 列表项中只有一个文本节点（使用六个字符串创建）。

当前，您没有CSS可以选择的任何东西（主要限于元素）来区分数据的各个位，因此您无法。

您需要添加其他标记。

例如

"<li><span class='firstName'>" + data.users[i].firstName + "</span>"

我强烈建议一次构建每个元素并append它们，而不是然后尝试合并一个巨大的字符串。

Answer 2

最简单的方法是将名字和姓氏包裹在另一个标签中，然后将CSS样式添加到新标签中。

"<li><span>" + data.users[i].firstName + " " + data.users[i].lastName + "</span>"

而对于CSS

ul li span:first-child {
      font-weight:bold;
}

http://jsfiddle.net/5bfzo1q2/26/