更改布局-如何改變樣式？

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