能否调整JavaScript中document.write创建的img标签位置？

先修正现有代码的核心问题 #

你的代码存在一个严重问题：在DOMContentLoaded事件中调用upload()时使用了document.write，这会在页面加载完成后覆盖整个HTML文档。必须改成通过DOM API创建并插入元素，比如createElement和appendChild：

// 替换原test.jsp中的upload函数
function upload() {
  const container = document.createElement('div');
  container.className = 'image-grid'; // 给容器加类，用于布局
  for(let i = 1; i < 301; i++) {
    const iSet = i.toString().padStart(3, '0'); // 简化数字补零逻辑
    const img = document.createElement('img');
    img.className = `_${i}`;
    img.src = `./img/${iSet}.webp`;
    img.style.width = '10%';
    img.onclick = () => {
      changeStyle(i);
      save();
    };
    img.onerror = () => {
      img.style.display = 'none';
    };
    container.appendChild(img);
  }
  document.body.appendChild(container);
}

// 修正DOMContentLoaded绑定方式（不要加括号，否则立即执行）
document.addEventListener("DOMContentLoaded", upload);

方案一：CSS Grid 自由定位 #

你可以通过CSS Grid实现网格布局，用自定义属性管理每个图片的网格位置，无需定义大量_0101类：

1. CSS 配置 #

先定义网格容器，设置行列数量（假设用20行×15列容纳300张图），通过自定义属性控制图片位置：

.image-grid {
  display: grid;
  grid-template-columns: repeat(15, 1fr); /* 15列 */
  grid-template-rows: repeat(20, 1fr); /* 20行 */
  gap: 4px; /* 可选：图片间距 */
  width: 100%;
  height: 100vh; /* 占满视口高度，可按需调整 */
}

.image-grid img {
  /* 从自定义属性读取网格位置，默认第1行第1列 */
  grid-row-start: var(--grid-row, 1);
  grid-column-start: var(--grid-column, 1);
  width: 100%; /* 适配网格单元格，原10%改为容器控制 */
  object-fit: cover; /* 保持图片比例 */
}

2. JS 控制位置 #

要调整某张图片的位置（比如把类为_1的图片移到[1,2]，即第1行第2列），直接修改其自定义属性：

function changeStyle(imgNum) {
  const img = document.querySelector(`._${imgNum}`);
  // 设置目标网格位置：行1，列2
  img.style.setProperty('--grid-row', 1);
  img.style.setProperty('--grid-column', 2);
}

如果需要预设初始位置，可在创建图片时直接设置：

// 在upload函数创建img后添加
if (i === 1) {
  // 初始位置设为第1行第1列
  img.style.setProperty('--grid-row', 1);
  img.style.setProperty('--grid-column', 1);
}

方案二：绝对定位+变量管理坐标 #

如果Grid方案不符合需求，可以用相对定位容器+绝对定位图片，通过自定义属性管理top和left坐标：

1. CSS 配置 #

.image-grid {
  position: relative;
  width: 100%;
  height: 100vh;
}

.image-grid img {
  position: absolute;
  width: 10%; /* 保持原有宽度设置 */
  /* 从自定义属性读取坐标，默认左上角 */
  top: var(--pos-top, 0%);
  left: var(--pos-left, 0%);
}

2. JS 控制位置 #

假设网格每个单元格的宽高是容器的1/15和1/20（对应15列20行），计算坐标后设置：

function changeStyle(imgNum) {
  const img = document.querySelector(`._${imgNum}`);
  // 目标位置[1,2]：第1行（top=0%），第2列（left=100%/15 ≈6.666%）
  const row = 1;
  const col = 2;
  const cellWidthPercent = 100 / 15;
  const cellHeightPercent = 100 / 20;
  
  img.style.setProperty('--pos-top', `${(row - 1) * cellHeightPercent}%`);
  img.style.setProperty('--pos-left', `${(col - 1) * cellWidthPercent}%`);
}

同样，初始位置可以在创建图片时设置，也可以用像素值替代百分比，根据实际布局需求调整。

内容的提问来源于stack exchange，提问作者Luke Park