如何修改或移除后代选择器下img元素的CSS width属性？

你遇到的问题核心在于：element.style仅能读取或修改元素的内联样式（即写在HTML元素style属性里的样式），而你的width:100%是通过CSS类选择器定义的，所以element.style里不会有这个属性；getComputedStyle()获取的是浏览器计算后的最终样式，确实是只读的无法直接修改。

下面是几种可行的解决办法：

方法一：用内联样式覆盖原有规则 #

内联样式的优先级高于类选择器定义的样式，直接给img设置内联width就能覆盖原有规则：

// 获取目标img元素
const targetImg = document.querySelector('.main_box_img img');
// 修改为你需要的宽度，比如auto（恢复元素默认宽度）
targetImg.style.width = 'auto';
// 如果是要"移除"的效果，若之后想恢复类样式，可移除内联属性
// targetImg.style.removeProperty('width');

方法二：添加新CSS类覆盖样式 #

更符合样式管理逻辑的方式是定义新的CSS类，通过JS给元素添加这个类来覆盖原有样式：
首先在CSS里新增类：

/* 优先级和原有类一致，后定义的会生效；若需要更高优先级可加!important，或调整选择器权重 */
.main_box_img img.custom-width {
  width: auto;
  /* 也可设置具体值，比如200px */
}

然后用JS添加类：

const targetImg = document.querySelector('.main_box_img img');
targetImg.classList.add('custom-width');
// 之后需要恢复原有样式时，移除该类即可
// targetImg.classList.remove('custom-width');

方法三：直接修改全局CSS规则（不推荐） #

如果需要全局修改所有.main_box_img img的宽度，可以直接修改样式表的规则，但这会影响所有使用该选择器的元素，谨慎使用：

// 遍历所有样式表，找到目标规则
for (const sheet of document.styleSheets) {
  for (const rule of sheet.cssRules) {
    if (rule.selectorText === '.main_box_img img') {
      rule.style.width = 'auto';
      break;
    }
  }
}

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