嘿，手动改5次内联样式确实太冗余了，完全没必要！给你两个高效的解决方案，选适合你的就行：

方案一：用CSS类统一控制（推荐） #

样式本来就该和HTML结构分离，把重复的样式规则写到CSS里，以后改宽度只要改一次CSS就搞定所有输入框：

修改后的HTML #

去掉每个input里的width:8%; text-align:center内联样式，保留其他必要属性：

<input class="box" type="text" id="a" value="A" readonly="true"/>
<input class="box" type="text" id="b" value="B" readonly="true"/>
<input class="box" type="text" id="c" value="C" readonly="true"/>
<input class="box" type="text" id="d" value="D" readonly="true"/>
<input class="box" type="text" id="e" value="E" readonly="true"/>

对应的CSS #

在<style>标签或者外部样式表里定义.box类的样式：

.box {
  width: 6%; /* 这里改一次就所有输入框生效 */
  text-align: center;
}

以后要调整宽度，直接改CSS里的width值就行，完全不用碰HTML，这也是前端开发的最佳实践哦。

方案二：用JavaScript批量修改（适合动态场景） #

如果因为某些限制不能改CSS，比如样式是动态生成的，那可以用JS批量选中所有.box元素，循环修改它们的宽度：

// 选中所有带box类的输入框
const inputBoxes = document.querySelectorAll('.box');
// 遍历修改宽度
inputBoxes.forEach(box => {
  box.style.width = '6%';
});

这段代码会一次性把所有目标输入框的宽度改成6%，不用一个个操作。

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