使用十六进制颜色代码时，JavaScript订阅按钮背景色切换失效

开发网站订阅功能时，用户可选择月度或年度订阅，点击对应按钮切换订阅链接的功能正常，但选中按钮的背景色切换出现异常：

• 使用颜色名green时，JS代码可正常实现「选中按钮变绿色，未选中保持白色」的效果；
• 替换为十六进制颜色代码#bf1363后，切换按钮时两个按钮都会变为#bf1363，无法正常重置未选中按钮的样式。

使用技术栈：Bootstrap 4 + 原生JavaScript

相关代码 #

HTML结构

<!-- Select Subscription Instructions -->
<p class="mb-0">
    <strong>Select your subscription type then click subscribe:</strong>
</p>

<!-- Yearly Subscription Button -->
<button id="yearly_subscription_selected" class="btn mr-2" type="submit" onclick="">
    Yearly Membership: £41.50 plus VAT
</button>

<!-- Monthly Subscription Button -->
<button id="monthly_subscription_selected" class="btn my-2" type="submit" onclick="">
    Monthly Membership: £8.25 plus VAT
</button>

正常工作的JS代码（使用颜色名green）

// Membership select Year JS 
document.getElementById("yearly_subscription_selected").onclick = function () {
  let link = document.getElementById("abc");
  link.setAttribute("href", "https://www.checkouty.htm");
  document.getElementById("yearly_subscription_selected").setAttribute("style", "background-color: green; color: #fff");
  if (document.getElementById("yearly_subscription_selected").style.backgroundColor == "green") {
    document.getElementById("monthly_subscription_selected").setAttribute("style", "background-color: white; color: #000");
  }
  return false;
}

// Membership select Month JS
document.getElementById("monthly_subscription_selected").onclick = function () {
  let link = document.getElementById("abc");
  link.setAttribute("href", "https://www.checkoutm.htm");
  document.getElementById("monthly_subscription_selected").setAttribute("style", "background-color: green; color: #fff");
  if (document.getElementById("monthly_subscription_selected").style.backgroundColor == "green") {
    document.getElementById("yearly_subscription_selected").setAttribute("style", "background-color: white; color: #000");
  }
  return false;
}

异常的JS代码（替换为十六进制颜色#bf1363）

// Membership select Year JS 
document.getElementById("yearly_subscription_selected").onclick = function () {
  let link = document.getElementById("abc");
  link.setAttribute("href", "https://www.checkouty.htm");
  document.getElementById("yearly_subscription_selected").setAttribute("style", "background-color: #bf1363; color: #fff");
  if (document.getElementById("yearly_subscription_selected").style.backgroundColor == "#bf1363") {
    document.getElementById("monthly_subscription_selected").setAttribute("style", "background-color: white; color: #000");
  }
  return false;
}

// Membership select Month JS
document.getElementById("monthly_subscription_selected").onclick = function () {
  let link = document.getElementById("abc");
  link.setAttribute("href", "https://www.checkoutm.htm");
  document.getElementById("monthly_subscription_selected").setAttribute("style", "background-color: #bf1363; color: #fff");
  if (document.getElementById("monthly_subscription_selected").style.backgroundColor == "#bf1363") {
    document.getElementById("yearly_subscription_selected").setAttribute("style", "background-color: white; color: #000");
  }
  return false;
}

问题原因 #

核心问题在于：通过element.style.backgroundColor获取颜色值时，浏览器会自动将十六进制颜色转换为RGB格式返回，而非你设置的原始十六进制字符串。

比如你设置background-color: #bf1363，实际通过style.backgroundColor获取到的值是rgb(191, 19, 99)，此时你的判断条件== "#bf1363"永远不成立，导致「重置未选中按钮样式」的逻辑完全没触发，最终两个按钮都被设置为目标颜色#bf1363。

而使用颜色名green时，浏览器返回的就是字符串"green"，所以判断条件能正常匹配，逻辑生效。

解决方法 #

方法1：直接匹配RGB格式（不推荐，兼容性差）

将判断条件中的十六进制字符串替换为对应的RGB值：

// 年度按钮的判断条件改为
if (document.getElementById("yearly_subscription_selected").style.backgroundColor == "rgb(191, 19, 99)") {
    // ...重置月度按钮样式
}

注意：不同浏览器对RGB值的格式可能有差异（比如是否带空格、大小写），这种方式稳定性差。

方法2：用CSS类管理选中状态（推荐，符合Bootstrap设计思路）

放弃直接操作style属性，改用CSS类来控制选中/未选中状态，彻底避免颜色格式不匹配的问题：

1. 先定义CSS类：

.subscription-selected {
    background-color: #bf1363 !important;
    color: #fff !important;
}
.subscription-unselected {
    background-color: white !important;
    color: #000 !important;
}

（添加!important是为了覆盖Bootstrap默认的.btn样式）

2. 修改JS代码，通过添加/移除类来切换状态：

// 年度订阅点击事件
document.getElementById("yearly_subscription_selected").onclick = function () {
    const link = document.getElementById("abc");
    link.setAttribute("href", "https://www.checkouty.htm");
    
    // 当前按钮设为选中状态
    this.classList.add("subscription-selected");
    this.classList.remove("subscription-unselected");
    
    // 月度按钮设为未选中状态
    const monthlyBtn = document.getElementById("monthly_subscription_selected");
    monthlyBtn.classList.add("subscription-unselected");
    monthlyBtn.classList.remove("subscription-selected");
    
    return false;
}

// 月度订阅点击事件
document.getElementById("monthly_subscription_selected").onclick = function () {
    const link = document.getElementById("abc");
    link.setAttribute("href", "https://www.checkoutm.htm");
    
    // 当前按钮设为选中状态
    this.classList.add("subscription-selected");
    this.classList.remove("subscription-unselected");
    
    // 年度按钮设为未选中状态
    const yearlyBtn = document.getElementById("yearly_subscription_selected");
    yearlyBtn.classList.add("subscription-unselected");
    yearlyBtn.classList.remove("subscription-selected");
    
    return false;
}

这种方式代码更清晰，维护性更强，也符合Bootstrap通过类控制组件样式的最佳实践。

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