如何使用JavaScript为禁用状态的按钮设置颜色或背景色？

你的代码里有一个典型的小问题：JavaScript操作行内CSS样式时，属性名需要用驼峰式命名，你写的background_color应该改成backgroundColor。不过更推荐用CSS伪类来控制禁用按钮的样式，比直接用JS设置更灵活易维护。

方案一：修正JavaScript代码 #

const btn = document.getElementById('interval');
btn.disabled = true;
btn.style.backgroundColor = 'white'; // 驼峰式命名才会生效

方案二：使用CSS :disabled 伪类（推荐） #

直接在样式表中定义禁用状态的样式，不管按钮是通过JS还是HTML原生disabled属性设置禁用，样式都会自动生效：

.btn:disabled {
  background-color: white;
  color: #666; /* 可选：设置禁用状态下的文字颜色 */
}

如果浏览器默认的禁用样式优先级更高，可以调整选择器权重（比如写成#interval.btn:disabled），尽量避免使用!important。

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