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可以选择的内容（主要限于元素），可以区分不同的数据位，因此您无法做到。

您需要添加其他标记。

e.g。

"<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/

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

2 个答案: