如何简化按钮样式编辑器的JavaScript遍历与样式控制代码？

核心优化思路 #

1. 给HTML输入框添加语义化name属性，彻底抛弃依赖索引（input[0]）的脆弱写法
2. 使用事件委托替代逐个绑定事件，减少冗余代码
3. 通过name属性直接映射样式值，让逻辑更直观
4. 补充默认值处理，避免空值导致样式异常

修改后的HTML #

给每个input添加明确的name属性，方便JS精准获取对应值：

<div class="btn_container">
  <div class="btn_container_btn">
    <a href="/" class="btn">BUTTON LINK</a>
  </div>
</div>
<div class="editor">
  <div class="editor_box">
    <div class="selection">
      <p>Text</p>
      <div class="edit_row">
        Size <input type="number" name="font-size" value="16">
      </div>
      <div class="edit_row">
        Color <input type="color" name="text-color" value="#ffffff">
      </div>
      <div class="edit_row radius">
        <span>
          <input type="number" name="padding-top" class="paddingTop" value="12">
        </span><span>
          <input type="number" name="padding-left" class="paddingLeft" value="24">PADDING<input type="number" name="padding-right" class="paddingRight" value="24">
        </span><span>
          <input type="number" name="padding-bottom" class="paddingBottom" value="12">
        </span>
      </div>
    </div>
  </div>
  <div class="editor_box">
    <div class="selection">
      <p>Border</p>
      <div class="edit_row">
        Color <input type="color" name="border-color" value="#000000">
      </div>
      <div class="edit_row radius">
        <span class="gap">
          <input type="number" name="border-radius-tl" value="0"><input type="number" name="border-radius-tr" value="0">
        </span>
        <span>
          RADIUS
        </span>
        <span class="gap">
          <input type="number" name="border-radius-br" value="0"><input type="number" name="border-radius-bl" value="0">
        </span>
      </div>
      <div class="edit_row radius">
        <span> <input type="number" name="border-width-t" value="1"></span>
        <span class="gap"><input type="number" name="border-width-l" value="1">STROKE <input type="number" name="border-width-r" value="1"></span>
        <span><input type="number" name="border-width-b" value="1"></span>
      </div>
    </div>
  </div>
  <div class="editor_box">
    <div class="selection">
      <p>Border</p>
      <div class="edit_row">
        Color <input type="color" name="border-color-2" value="#000000">
      </div>
      <div class="edit_row radius">
        <span class="gap">
          <input type="number" name="border-radius-tl-2" value="0"><input type="number" name="border-radius-tr-2" value="0">
        </span>
        <span>
          RADIUS
        </span>
        <span class="gap">
          <input type="number" name="border-radius-br-2" value="0"><input type="number" name="border-radius-bl-2" value="0">
        </span>
      </div>
      <div class="edit_row radius">
        <span> <input type="number" name="border-width-t-2" value="1"></span>
        <span class="gap"><input type="number" name="border-width-l-2" value="1">STROKE <input type="number" name="border-width-r-2" value="1"></span>
        <span><input type="number" name="border-width-b-2" value="1"></span>
      </div>
    </div>
  </div>
</div>

简化后的JavaScript #

"use strict";

const container = document.querySelector(".btn_container");
const editor = document.querySelector(".editor");
const style = document.createElement("style");

// 预设默认值，避免空值导致样式异常
const defaults = {
  "font-size": "16",
  "text-color": "#ffffff",
  "padding-top": "12",
  "padding-left": "24",
  "padding-right": "24",
  "padding-bottom": "12",
  "border-color": "#000000",
  "border-radius-tl": "0",
  "border-radius-tr": "0",
  "border-radius-br": "0",
  "border-radius-bl": "0",
  "border-width-t": "1",
  "border-width-l": "1",
  "border-width-r": "1",
  "border-width-b": "1",
  // 第二个Border编辑器的默认值
  "border-color-2": "#000000",
  "border-radius-tl-2": "0",
  "border-radius-tr-2": "0",
  "border-radius-br-2": "0",
  "border-radius-bl-2": "0",
  "border-width-t-2": "1",
  "border-width-l-2": "1",
  "border-width-r-2": "1",
  "border-width-b-2": "1",
};

// 事件委托：监听整个编辑器的输入事件
editor.addEventListener("input", updateButtonStyle);

// 初始化样式
updateButtonStyle();

function updateButtonStyle() {
  // 获取输入框值，优先用用户输入，无输入则取默认值
  const getValue = (name) => document.querySelector(`input[name="${name}"]`)?.value || defaults[name];

  style.innerHTML = `
    .btn {
      background: #4D1CDA;
      /* 第一个Border样式 */
      border-width: ${getValue("border-width-t")}px ${getValue("border-width-r")}px ${getValue("border-width-b")}px ${getValue("border-width-l")}px;
      border-style: solid;
      border-color: ${getValue("border-color")};
      border-radius: ${getValue("border-radius-tl")}px ${getValue("border-radius-tr")}px ${getValue("border-radius-br")}px ${getValue("border-radius-bl")}px;
      /* 文本与内边距样式 */
      font-size: ${getValue("font-size")}px;
      padding: ${getValue("padding-top")}px ${getValue("padding-right")}px ${getValue("padding-bottom")}px ${getValue("padding-left")}px;
    }
    .btn {
      /* 第二个Border样式 */
      border-width: ${getValue("border-width-t-2")}px ${getValue("border-width-r-2")}px ${getValue("border-width-b-2")}px ${getValue("border-width-l-2")}px;
      border-color: ${getValue("border-color-2")};
      border-radius: ${getValue("border-radius-tl-2")}px ${getValue("border-radius-tr-2")}px ${getValue("border-radius-br-2")}px ${getValue("border-radius-bl-2")}px;
    }
    a {
      color: ${getValue("text-color")};
      text-decoration: none;
    }
  `;
}

container.appendChild(style);

优化点说明 #

1. 语义化命名：通过name属性直接关联CSS属性，比如name="font-size"对应样式里的font-size，完全不需要记忆索引位置
2. 事件委托：仅给父容器绑定一个事件，新增输入框无需额外绑定，性能更优、代码更简洁
3. 默认值处理：预设defaults对象，避免用户未输入时样式出现异常
4. 函数封装：将样式更新逻辑封装成独立函数，初始化和输入时复用同一逻辑
5. 可读性提升：每个样式属性都对应明确的输入值，逻辑一目了然，后续维护或扩展功能更轻松

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