如何在原生JS中选取包含相同关键词的多个ID元素？

要选取所有ID以指定前缀（比如img1、img2这类的img前缀）开头的元素，不用jQuery的话，有两种常用原生方案：

方案1：使用document.querySelectorAll结合属性选择器 #

这是最简洁的方式，利用CSS属性选择器匹配ID前缀：

// 选取所有ID以"img"开头的元素
const imgElements = document.querySelectorAll('[id^="img"]');

• [id^="img"]表示ID属性值以"img"开头的元素；
• 如果是要匹配ID包含指定关键词（不一定是前缀），可以用[id*="img"]（*表示包含任意位置的关键词）。

方案2：遍历元素并手动判断ID #

如果需要更灵活的判断逻辑，可以遍历页面元素并筛选：

const imgElements = [];
// 获取页面所有元素（也可以限定标签范围，比如只找img标签：document.getElementsByTagName('img')）
const allElements = document.querySelectorAll('*');

allElements.forEach(element => {
  // 判断ID是否以"img"开头
  if (element.id && element.id.startsWith('img')) {
    imgElements.push(element);
  }
});

这种方式适合需要自定义判断规则的场景，比如ID前缀是动态生成的情况。

结合你的代码修改示例 #

你的原始代码只针对单个ID元素操作，改成批量处理的话可以这样写：

// 提前保存所有目标元素的原始宽度
const imgElements = document.querySelectorAll('[id^="img"]');
const originalWidths = [];

// 初始化保存每个元素的原始宽度（兼容内联样式和CSS类设置的宽度）
imgElements.forEach((el, index) => {
  originalWidths[index] = el.style.width || getComputedStyle(el).width;
});

document.getElementById("resizeButton").addEventListener("click", function () {
  changedivclass();
  imgElements.forEach((el, index) => {
    if (el.style.width === "100%") {
      el.style.width = originalWidths[index]; 
    } else {
      el.style.width = "100%"; 
    }
  });
});

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