拥有8个同类函数时，如何批量修改所有按钮的Style（width、color等）

嘿，我来给你捋捋怎么高效搞定这8个函数里的按钮样式修改～ 下面分几种常见场景给你方案，选最适合你的就行：

1. 最推荐：用CSS统一控制（样式与逻辑分离） #

这是前端开发的最佳实践，把样式集中在CSS里管理，不用动JS代码（除非按钮还没统一类名）：

• 第一步：给所有函数里创建的按钮添加一个统一的类名，比如custom-action-button
  比如原生JS创建按钮时：

  function createButtonX() {
    const btn = document.createElement('button');
    btn.classList.add('custom-action-button'); // 加统一类名
    // 其他按钮逻辑...
  }
  

• 第二步：在CSS文件里写这个类的样式，所有带这个类的按钮都会自动应用：

  .custom-action-button {
    width: 140px; /* 你要的宽度 */
    color: #fff; /* 文字颜色 */
    background-color: #165DFF; /* 背景色 */
    border: none;
    border-radius: 6px;
    padding: 10px 20px;
    cursor: pointer;
    /* 其他你需要的样式，比如hover状态 */
  }
  
  .custom-action-button:hover {
    background-color: #0F4CD0;
  }
  

  以后要改样式，直接改CSS就行，8个函数里的按钮全部同步更新，超省心！

2. 框架场景：封装通用按钮组件 #

如果你用React、Vue这类框架，直接封装一个可复用的按钮组件是最优解：
比如React用styled-components的例子：

// 封装CustomButton组件
import styled from 'styled-components';

const CustomButton = styled.button`
  width: 140px;
  color: white;
  background-color: #165DFF;
  border-radius: 6px;
  padding: 10px 20px;
  border: none;
  cursor: pointer;

  &:hover {
    background-color: #0F4CD0;
  }
`;

// 然后在你的8个函数/组件里直接用这个组件
function SomeFunctionComponent() {
  return (
    <div>
      {/* 替换原来的<button> */}
      <CustomButton onClick={handleClick}>点击我</CustomButton>
    </div>
  );
}

Vue的话可以写一个CustomButton.vue单文件组件，然后在各个地方引入使用，原理一样——改组件样式，所有引用的地方自动更新。

3. 特殊需求：JS动态统一设置样式 #

如果因为某些原因必须用JS控制样式（不推荐，除非样式需要动态计算），可以写一个通用的样式设置函数，然后在每个创建按钮的地方调用：

// 通用样式设置函数
function applyButtonStyles(buttonElement) {
  buttonElement.style.width = '140px';
  buttonElement.style.color = '#fff';
  buttonElement.style.backgroundColor = '#165DFF';
  buttonElement.style.borderRadius = '6px';
  buttonElement.style.padding = '10px 20px';
  // 其他样式属性...
}

// 在每个创建按钮的函数里调用
function createButton1() {
  const btn = document.createElement('button');
  applyButtonStyles(btn); // 调用通用函数
  btn.textContent = '按钮1';
  // 其他逻辑...
}

function createButton2() {
  const btn = document.createElement('button');
  applyButtonStyles(btn); // 同样调用
  btn.textContent = '按钮2';
  // 其他逻辑...
}

这种方式下，以后改样式只需要修改applyButtonStyles里的代码，不用逐个修改8个函数。

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