如何在JavaScript中用全局变量统一设置图片的alt标签？

你原来的写法无效是因为HTML属性会把<script>altVariable</script>当作纯文本字符串，不会执行JS代码。下面是几种实用的解决方法：

1. 动态生成图片元素（适合批量创建图片的场景） #

直接用JS循环创建img标签，同时拼接alt属性：

const altPrefix = "img";
// 假设要生成10张图片，可根据实际数量调整
for (let i = 1; i <= 10; i++) {
  const img = document.createElement('img');
  img.src = `./images/photo${i}.jpg`; // 替换成你的图片路径
  img.alt = `${altPrefix}${i}`; // 拼接前缀和序号
  // 把图片插入到指定容器，比如id为img-box的元素
  document.getElementById('img-box').appendChild(img);
}

2. 批量修改现有图片的alt属性（适合已写好HTML结构的场景） #

先给HTML里的图片加标识（比如data-index存储序号，或者用类名分组），再用JS批量设置alt：

HTML结构： #

<img src="./img1.jpg" data-index="1">
<img src="./img2.jpg" data-index="2">
<img src="./img3.jpg" data-index="3">

JS代码： #

const altPrefix = "img";
// 获取所有带data-index的图片
const imgs = document.querySelectorAll('img[data-index]');
imgs.forEach(img => {
  const imgNumber = img.dataset.index;
  img.alt = `${altPrefix}${imgNumber}`;
});

如果图片没有预设序号，也可以用遍历的索引值：

const altPrefix = "img";
const imgs = document.querySelectorAll('.your-img-class'); // 用类名选择
imgs.forEach((img, index) => {
  img.alt = `${altPrefix}${index + 1}`; // 索引从0开始，所以加1
});

3. 用原生模板标签复用结构（适合需要复用图片模板的场景） #

借助HTML的<template>标签定义图片模板，再通过JS填充内容：

<template id="img-template">
  <img src="" alt="" class="gallery-img">
</template>
<div id="img-container"></div>

<script>
const altPrefix = "img";
const template = document.getElementById('img-template');
const container = document.getElementById('img-container');

// 循环生成图片
for (let i = 1; i <= 8; i++) {
  const imgNode = template.content.cloneNode(true).querySelector('img');
  imgNode.src = `./gallery/img${i}.png`;
  imgNode.alt = `${altPrefix}${i}`;
  container.appendChild(imgNode);
}
</script>

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