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

【问题标题】：How To Turn JS Objects To HTML And Style With CSS如何使用 CSS 将 JS 对象转换为 HTML 和样式
【发布时间】：2014-09-26 08:26:22
【问题描述】：

我正在学习 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;
}

&lt;div id="writeTo"&gt;&lt;/div&gt;

【问题讨论】：

在将它们添加到<li> 时将它们包装在<span>s 中，然后以这种方式设置它们的样式。
当它们在 JS 对象中时，你不能对它们做任何事情。您需要将这些属性输出到 DOM。
JSON（或 JS 对象，在本例中）无法使用 CSS 设置样式。只有 HTML 元素可以以这种方式设置样式。重写问题和标题以仅显示 final/actual HTML - 其中问题将是可见的。如果问题是关于将 JSON 转换为适当的 HTML，请询问该问题（并删除任何关于 CSS 的内容）。我建议使用适当的 DOM 操作来生成 HTML/内容。
如果主题和问题更好，请告诉我。

标签： javascript html css json css-selectors

【解决方案1】：

您不能选择带有 CSS 的 JSON。它在 DOM 上运行。

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

目前您没有任何 CSS 可以选择（主要限于元素）来区分各种数据位，所以您不能。

您需要添加额外的标记。

例如

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

我强烈建议一次构建每个元素并appending 他们而不是尝试混搭一个巨大的字符串。

【讨论】：

从技术上讲，您可以使用选择器 given an implementation that performs all the necessary mappings 查询 JSON，尽管显然第一条语句只是一种简化，因为问题实际上是关于将数据从 JSON 转换为 DOM 元素，然后使用 CSS 设置它们的样式。

【解决方案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/

【讨论】：