更改布局-如何改变样式？

Question

我有一些JSON数据，它渲染得非常好。

目前，我正在从超级对象中获取名称，价格，图像（请参见屏幕截图）。

但是，我需要对此进行样式设置，以使每条连衣裙看起来都像这样，但要水平放置（屏幕截图）

现在，我设法使用JS中的样式标签对图像进行样式设置，使其达到300像素，但是，我对如何对其余元素进行样式设置一无所知？ 我是否使用普通的样式表？

这是我的 HTML-如您所见，我只有一个ID为jsonData的div，它保存所有数据。

<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的新手。

Answer 1

像这样调整代码

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可以很容易地在视觉上进行调整。

这是有关如何对齐宽度为300px的浮动框的较少示例；

.block {
  widht: 300px;
  float: left;
  padding: 5px;
  border: 1px solid red;

  .price {
    font-weight: bold;
    width: 100%;
  }
}

Answer 2

我可以推荐以下步骤：

首先，您需要将数据保存在javascript对象中，以便可以方便地访问它（使用JSON.parse从JSON字符串获取对象）。
然后，您可以设置HTML模板，编写相关标签并准备好保存数据。
作为最后一步，在接收数据的方法（例如，对服务器进行ajax调用的成功回调）中，使用javascript更新相关html标记中的数据。
请注意，到目前为止，我们已经讨论了将数据放入HTML。 样式本身将通过CSS进行，就像处理常规静态数据一样。 请确保您为存储数据的div分配了相关的ID /类，以便可以在CSS中引用它们。 例如，产品名称div的.name类，等等。

Answer 3

好朋友！ 不要使用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中实现任何样式。

更改布局-如何改变样式？

问题描述

3 个解决方案

解决方案1
2 2017-06-27 13:42:50

解决方案2
0 2017-06-27 13:40:20

解决方案3
0 2017-06-27 13:47:06

更改布局-如何改变样式？

问题描述

3 个解决方案

解决方案1 2 2017-06-27 13:42:50

解决方案2 0 2017-06-27 13:40:20

解决方案3 0 2017-06-27 13:47:06

解决方案1
2 2017-06-27 13:42:50

解决方案2
0 2017-06-27 13:40:20

解决方案3
0 2017-06-27 13:47:06