如何定位对象图像并使用 CSS 对其进行样式设置？

Question

我有一个由 6 个对象组成的数组，其中有 6 张图像。我已经通过 JS 代码将这些图像呈现在 HTML 表中。现在我只想定位其中之一并为其设计风格。宽度、高度等。

如何以最简单的方式做到这一点？

我尝试用CSS代码在对象中编写一个

style

键。没用。

我尝试在特定的

getElementbyId

上

img

但它也不起作用。

我已经检查过其他主题，但到目前为止我所读到的内容对于我想做的事情来说确实很复杂。我只想更改一张图像的大小。

const products = [{
    "id": 1,
    "image": "https://via.placeholder.com/50",
    "name": "Orient Vita Pro 28\"",
    "price": "284.00",
    "inventory": 4,
    "productCode": "K203"
  },
  {
    "id": 2,
    "image": "https://via.placeholder.com/50",
    "name": "Orient S-400 26\"",
    "price": "198.00",
    "inventory": 14,
    "productCode": "K433"

  },
  {
    "id": 3,
    "image": "https://via.placeholder.com/50",
    "name": "Bullet Bora 20\"",
    "price": "350.00",
    "inventory": 7,
    "productCode": "K012"
  },
  {
    "id": 4,
    "image": "https://via.placeholder.com/50",
    "name": "Feder handmade",
    "price": "790.00",
    "inventory": 5,
    "productCode": "G0127"
  },
  {
    "id": 5,
    "image": "https://via.placeholder.com/50",
    "name": "Ibanez G120",
    "price": "430.00",
    "inventory": 2,
    "productCode": "G1233"
  },
  {
    "id": 6,
    "image": "https://via.placeholder.com/50",
    "name": "Feder Blues edition",
    "width": "1000",
    "price": "650.00",
    "inventory": 6,
    "productCode": "G4478"
  }
];

const placeholder = document.querySelector("#data-output");
let out = "";

for (let product of products) {
  out += `
            <tr>
                <td> <img src='${product.image}'> </td>
                <td>${product.name}</td>
                <td>${product.price}</td>
                <td>${product.inventory}</td>
                <td>${product.productCode}</td>
            </tr>
        `;
}

placeholder.innerHTML = out;

<table>
  <thead>
    <tr>
      <th>Image</th>
      <th>Product name</th>
      <th>Price</th>
      <th>inventory</th>
      <th>Product code</th>
    </tr>
  </thead>
  
  <tbody id="data-output">
  </tbody>
</table>

Answer 1

您不清楚为什么样式属性不起作用。好像会的。

const products = [{
    "id": 1,
    "image": "https://via.placeholder.com/50",
    "name": "Orient Vita Pro 28\"",
    "price": "284.00",
    "inventory": 4,
    "productCode": "K203"
  },
  {
    "id": 2,
    "image": "https://via.placeholder.com/50",
    "name": "Orient S-400 26\"",
    "price": "198.00",
    "inventory": 14,
    "productCode": "K433",
    "styles": {
      width: "25px",
      border: "2px solid orange"
    }
  },
  {
    "id": 3,
    "image": "https://via.placeholder.com/50",
    "name": "Bullet Bora 20\"",
    "price": "350.00",
    "inventory": 7,
    "productCode": "K012"
  },
  {
    "id": 4,
    "image": "https://via.placeholder.com/50",
    "name": "Feder handmade",
    "price": "790.00",
    "inventory": 5,
    "productCode": "G0127"
  },
  {
    "id": 5,
    "image": "https://via.placeholder.com/50",
    "name": "Ibanez G120",
    "price": "430.00",
    "inventory": 2,
    "productCode": "G1233"
  },
  {
    "id": 6,
    "image": "https://via.placeholder.com/50",
    "name": "Feder Blues edition",
    "width": "1000",
    "price": "650.00",
    "inventory": 6,
    "productCode": "G4478"
  }
];

const placeholder = document.querySelector("#data-output");
let out = "";

products.forEach(product => {
  let styleStr = '';

  if (product.styles) {
    Object.entries(product.styles).forEach(([key, value]) => {
      styleStr += key + ': ' + value + '; '
    });
  }

  out += `
            <tr>
                <td> <img src='${product.image}' style='${styleStr}'> </td>
                <td>${product.name}</td>
                <td>${product.price}</td>
                <td>${product.inventory}</td>
                <td>${product.productCode}</td>
            </tr>
        `;
});

placeholder.innerHTML = out;

<table>
  <thead>
    <tr>
      <th>Image</th>
      <th>Product name</th>
      <th>Price</th>
      <th>inventory</th>
      <th>Product code</th>
    </tr>
  </thead>

  <tbody id="data-output">
  </tbody>
</table>