如何在本地设置从JSON文件中获取的数据的样式?

时间:2016-09-25 19:39:25

标签: javascript html css json

如何设置从JSON文件中获取并使用javascript动态生成的数据的样式?例如,当我拍摄2个文本时,我想以不同的方式设置它们

 "<p class='nameMovie'>"
                + data[ i ].name + "  " + data[ i ].year + "  " + data[ i ].gender + "  " + data[ i ].runtime +
 "</p>"

在这段代码中我有文字喜欢 这样:

Godzilla 2014 Fantasy|Action|Sci-fi 2h 3min

今年,性别和运行时如何能够在哥斯拉之下

像这样的东西

Godzilla 2014 
Fantasy|Action|Sci-fi 2h 3min

1 个答案:

答案 0 :(得分:1)

以不同方式设置文本不同部分的唯一方法是将它们全部包装在自己的元素中,并为它们分别设置类名。

e.g。

<p class="movie">
    <span class="movieName">Godzilla</span> <span class="movieYear">2014</span>
    <span class="movieGenre">Fantasy|Action|Sci-fi</span>
    <span class="movieRunningTime">2h 3min</span>
</p>

然后,您可以尝试使用css来获得您想要的效果。 您可能还想尝试将<p>替换为<section>,或将<header>换成名称&amp;年元素。

暂且不说。我建议使用像胡子(https://github.com/janl/mustache.js/)这样的模板语言而不是在javascript中手动编写html。当打印到屏幕上时,这些库将正确地逃避数据,从而阻止奇怪的错误和xss攻击。