改变布局-how我能用不同的风格吗？
改变布局-how我能用不同的风格吗？
提问于 2017-06-27 13:34:01
我有一些JSON数据，呈现得非常好。
目前，我得到的名字，价格，图像(见截图)从我的对象是超级。
然而，我需要这个样式，使每件衣服看起来像这样，但水平(屏幕截图)
现在，我设法使用JS中的style标记对图像进行样式化，使其成为300 of，但是，对于如何对其余元素进行样式设计，我一无所知？我是否使用普通样式表？
这里是我的HTML-正如您所看到的，我只有一个div，它的id jsonData保存了所有的数据。
<body>
<h1>IF YOU LIKE THIS, YOU MIGHT INTERESTED IN THESE</h1>
<div id="jsonData"></div>
<script src="app.js"></script>
<div id="jsonData">
</div>
</body>，这是我的JS
var obj = {
'placements': [
{
'id': '029148',
'name': 'Woodblock Play Suit',
'linkURL':'http://www.warehouse.co.uk/gb/just-arrived/all/woodblock-play-suit/029148.html',
'imageURL':'http://demandware.edgesuite.net/aaxe_prd/on/demandware.static/-/Sites-WAREHOUSE/default/dw0f93fcd4/images/hi-res/warehouse_02914899_2.jpg',
'price':'46.00'
},
{
'id':'0294526806',
'name':'Smock Dress',
'linkURL':'http://www.warehouse.co.uk/gb/just-arrived/all/smock-dress/0294526806.html',
'imageURL':'http://demandware.edgesuite.net/aaxe_prd/on/demandware.static/-/Sites-WAREHOUSE/default/dwc9d5ea05/images/hi-res/warehouse_02945268_5.jpg',
'price':'39.00'
},
{
'id':'0297180006',
'name':'Cami',
'linkURL':'http://www.warehouse.co.uk/gb/just-arrived/all/cami/0297180006.html',
'imageURL':'http://demandware.edgesuite.net/aaxe_prd/on/demandware.static/-/Sites-WAREHOUSE/default/dw4b954022/images/hi-res/warehouse_02971800_2.jpg',
'price':'9.00'
},
{
'id':'0298473606',
'name':'Asymmetric Wrap Cami Dress',
'linkURL':'http://www.warehouse.co.uk/gb/just-arrived/all/asymmetric-wrap-cami-dress/0298473606.html',
'imageURL':'http://demandware.edgesuite.net/aaxe_prd/on/demandware.static/-/Sites-WAREHOUSE/default/dw686fea84/images/hi-res/warehouse_02984736_2.jpg',
'price':'46.00'
},
{
'id':'0297155306',
'name':'Casual Stripe Tee',
'linkURL':'http://www.warehouse.co.uk/gb/just-arrived/all/casual-stripe-tee/0297155306.html',
'imageURL':'http://demandware.edgesuite.net/aaxe_prd/on/demandware.static/-/Sites-WAREHOUSE/default/dw4609af3e/images/hi-res/warehouse_02971553_2.jpg',
'price':'16.00'
}
]
};
var divId = document.getElementById('jsonData');
for(var i=0;i<obj.placements.length;i++) {
divId.innerHTML += '' + obj.placements[i]['name'];
divId.innerHTML += '<br>';
divId.innerHTML += '' + obj.placements[i]['price'];
divId.innerHTML += '<br>';
divId.innerHTML += '<img src="' + obj.placements[i]['imageURL'] + '" style="max-width: 300px" /><br />';
}很抱歉，如果这是超级简单的话，我还不知道如何呈现JSON。
回答 3
Stack Overflow用户
发布于 2017-06-27 13:42:50
对代码进行如下调整
var divId = document.getElementById('jsonData');
for(var i=0;i<obj.placements.length;i++) {
divId.innerHTML += '<div class="block"><span class="name">' + obj.placements[i]['name'];
divId.innerHTML += '</span>';
divId.innerHTML += '<span class="price">' + obj.placements[i]['price'];
divId.innerHTML += '</span>';
divId.innerHTML += '<img class="image" src="' + obj.placements[i]['imageURL'] + '" style="max-width: 300px" /></div>';
}之后，您将获得如下格式的输出
<div class="block">
<span class="name">OutputName</span>
<span class="price">OutputPrice</span>
<img class="image" src="OutputImage">
</div>稍后，通过应用css/less/sass，可以很容易地进行可视化的调整。
下面是一个较少的例子，说明如何用300 of的宽度对齐左边浮动的框；
.block {
widht: 300px;
float: left;
padding: 5px;
border: 1px solid red;
.price {
font-weight: bold;
width: 100%;
}
}Stack Overflow用户
发布于 2017-06-27 13:40:20
我可以建议以下步骤：
- 首先，您需要将数据保存在javascript对象中，这样就可以方便地访问它(使用JSON.parse从JSON字符串中获取对象)。
- 然后，您可以设置一个HTML模板，编写相关的标记并准备它们来保存数据。
- 最后一步，在接收数据的方法(例如，对服务器的ajax调用的成功回调)中，使用javascript更新相关html标记中的数据。
- 请注意，到目前为止，我们讨论了如何将数据放在HTML中。样式本身将通过CSS完成，就像处理常规静态数据一样。请确保将相关in /类分配给保存数据的div，以便在CSS中引用它们。例如，产品名称div的.name类，等等。
Stack Overflow用户
发布于 2017-06-27 13:47:06
好朋友！不要使用javascript作为样式，只需将特定的class属性添加到img标记中，或者更方便地根据需要将img标记包装在div中，并将类应用于这些divs。然后，您可以使用CSS样式任何您想要的方式。
示例：
var divId = document.getElementById('jsonData');
for(var i=0;i<obj.placements.length;i++) {
divId.innerHTML += '' + obj.placements[i]['name'];
divId.innerHTML += '<br>';
divId.innerHTML += '' + obj.placements[i]['price'];
divId.innerHTML += '<br>';
divId.innerHTML += '<img src="' + obj.placements[i]['imageURL'] + '" class='myImage'" /><br />';
}然后在单独的文件中添加CSS：
.myImage {
width: 300px;
}
//and for selecting any specific element use
div:nth-child(2) {
background: red;
color: black;
}注意：这也是将您的设计与逻辑和标记分开的最佳实践。现在你可以在CSS中实现任何样式。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44781678
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号