如何使用JS单独修改页面中带有".background"类的jpg文件样式？

完全可以实现，你可以根据实际场景选以下两种方案：

方案1：纯CSS实现（更推荐，性能最优） #

用CSS属性选择器直接匹配后缀为jpg/jpeg的.background类图片，无需写JS：

/* 匹配src结尾为.jpg/.jpeg的img标签，加i参数可忽略大小写 */
img.background[src$=".jpg" i],
img.background[src$=".jpeg" i] {
  /* 这里写你要单独修改的属性 */
  border: 1px solid red;
  opacity: 0.8;
}

注意：该方案仅适用于src不带额外查询参数的img标签，如果图片地址类似xxx.jpg?version=1，后缀后有其他内容，建议用JS方案。

方案2：JS实现（适配所有场景） #

你可以遍历所有.background类元素，判断资源格式后再修改样式，更推荐通过新增专属类的方式修改样式，避免直接操作行内样式难以维护：

1. 先在CSS中定义JPG格式专属样式

.background.background--is-jpg {
  /* 自定义属性 */
}

2. 编写JS逻辑匹配元素并添加类

针对img标签的处理代码 #

const allBackgroundImgs = document.querySelectorAll('img.background')
allBackgroundImgs.forEach(img => {
  // 转小写后判断，兼容大写后缀如.JPG的情况
  const lowerSrc = img.src.toLowerCase()
  if (lowerSrc.endsWith('.jpg') || lowerSrc.endsWith('.jpeg')) {
    img.classList.add('background--is-jpg')
    // 如果需要直接修改行内样式可以写：img.style.你要改的属性 = '属性值'
  }
})

针对背景图（非img标签）的处理代码 #

如果你的.background是用background-image属性加载的图片，用以下逻辑处理：

const allBackgroundEls = document.querySelectorAll('.background')
allBackgroundEls.forEach(el => {
  // 提取背景图地址
  const bgStyle = getComputedStyle(el).backgroundImage
  const imgUrl = bgStyle.match(/url\(["']?(.*?)["']?\)/)?.[1]?.toLowerCase() || ''
  if (imgUrl.endsWith('.jpg') || imgUrl.endsWith('.jpeg')) {
    el.classList.add('background--is-jpg')
  }
})

注意：如果图片是动态插入到页面的，需要在元素挂载完成后再执行上述JS代码，或使用MutationObserver监听DOM变动自动处理新增元素。

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