能否在JS/JSX中像CSS那样编辑类内的img元素？函数内修改咨询

当然可以实现，根据你使用的场景（纯JS或React），有几种实用的方案：

1. 原生DOM查询+直接修改样式 #

适合纯JS项目，或者React中需要批量操作DOM的场景。通过querySelectorAll定位到目标类下的img元素，遍历修改样式：

// 纯JS场景：修改所有.container类下的img
const targetImgs = document.querySelectorAll('.container img');
targetImgs.forEach(img => {
  img.style.borderRadius = '8px';
  img.style.margin = '10px';
});

// React中结合useRef使用（避免直接操作全局DOM）
import { useRef, useEffect } from 'react';

function ImageContainer() {
  const containerRef = useRef(null);

  useEffect(() => {
    // 组件挂载后修改容器内的img
    if (containerRef.current) {
      const imgs = containerRef.current.querySelectorAll('img');
      imgs.forEach(img => {
        img.style.opacity = '0.7';
      });
    }
  }, []);

  return (
    <div className="container" ref={containerRef}>
      <img src="/img1.png" alt="示例图1" />
      <img src="/img2.png" alt="示例图2" />
    </div>
  );
}

2. React状态驱动的动态类名（推荐React项目使用） #

符合React单向数据流的设计思路，通过状态控制img的类名，间接修改样式：

import { useState } from 'react';

function ControlledImageContainer() {
  const [modifyImgs, setModifyImgs] = useState(false);

  // 点击按钮切换样式状态
  const toggleImgStyles = () => {
    setModifyImgs(!modifyImgs);
  };

  return (
    <div className="container">
      {/* 给需要修改的img添加动态类 */}
      <img 
        src="/img1.png" 
        alt="示例图1" 
        className={modifyImgs ? "container__img--modified" : ""}
      />
      <img src="/img2.png" alt="示例图2" /> {/* 这个img不修改 */}
      <button onClick={toggleImgStyles}>切换容器内img样式</button>
    </div>
  );
}

对应的CSS：

.container .container__img--modified {
  width: 200px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

3. CSS变量+JS修改（批量修改更高效） #

通过定义CSS变量，让目标类下的img继承变量值，再用JS修改变量实现样式批量更新：

/* 提前定义CSS变量 */
.container img {
  --img-border-color: #ccc;
  border: 2px solid var(--img-border-color);
}

// 纯JS中修改变量
document.querySelector('.container').style.setProperty('--img-border-color', '#ff4400');

// React中用ref修改
useEffect(() => {
  if (containerRef.current) {
    containerRef.current.style.setProperty('--img-border-color', '#ff4400');
  }
}, []);

如果是React项目，优先选择状态驱动类名的方案，能避免直接操作DOM带来的副作用；如果需要批量修改大量元素，CSS变量的方式更高效。

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