如何定位并样式化JS渲染到HTML表格中的单张图片？

问题描述 #

我有一个包含6个图片对象的数组，已通过JS代码将这些图片渲染至HTML表格中。现需仅定位并样式化其中一张图片（如设置宽、高等），请问最简实现方式是什么？
我曾尝试在对象中添加style属性存储CSS代码，但未生效；也尝试使用getElementbyId定位特定img元素，同样无效。查阅相关内容后发现现有方案过于复杂，我仅需修改单张图片的尺寸。

附原代码：

JS代码 #

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;

HTML代码 #

<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>

最简解决方案 #

方案1：渲染时直接添加内联样式（最直接） #

利用产品的唯一标识（比如id），在拼接HTML时判断目标产品，给对应图片插入style属性。以修改id=6的图片为例：

修改JS循环部分：

for (let product of products) {
  // 针对目标产品添加样式
  const imgStyle = product.id === 6 ? 'style="width: 100px; height: 100px;"' : '';
  out += `
            <tr>
                <td> <img src='${product.image}' ${imgStyle}> </td>
                <td>${product.name}</td>
                <td>${product.price}</td>
                <td>${product.inventory}</td>
                <td>${product.productCode}</td>
            </tr>
        `;
}

这种方式无需额外DOM操作，直接在渲染阶段完成样式设置，一步到位。

方案2：添加专属类名，用CSS控制（样式分离） #

如果更倾向于样式与结构分离，可给目标图片加类名，再通过CSS设置样式：

修改JS渲染代码：

for (let product of products) {
  const imgClass = product.id === 6 ? 'special-product-img' : '';
  out += `
            <tr>
                <td> <img src='${product.image}' class="${imgClass}"> </td>
                <td>${product.name}</td>
                <td>${product.price}</td>
                <td>${product.inventory}</td>
                <td>${product.productCode}</td>
            </tr>
        `;
}

添加CSS规则：

.special-product-img {
  width: 100px;
  height: 100px;
  /* 可扩展其他样式 */
}

方案3：纯CSS选择器定位（无需修改JS） #

如果不想改动JS代码，可通过CSS的:nth-child选择器定位对应行的图片（注意：仅当产品顺序固定时适用）：

#data-output tr:nth-child(6) img {
  width: 100px;
  height: 100px;
}

这里的nth-child(6)对应tbody中第6个<tr>，也就是数组里的第6个产品。

之前尝试无效的原因 #

• 在对象中添加style属性未生效：因为你没有在渲染<img>标签时将这个属性插入到HTML字符串中，需要像方案1那样主动拼接。
• getElementById无效：因为渲染出的<img>标签没有设置id属性，只要在渲染时给目标图片加上id="img-${product.id}"，就能通过document.getElementById('img-6')获取并修改样式。

内容的提问来源于stack exchange，提问作者Florian Cheheb