如何用jQuery获取点击的Bootstrap按钮原始背景色而非:hover状态色？

这个问题我之前也遇到过！原因是当你点击按钮的时候，它正处于:active或者:hover的伪类状态中，Bootstrap给这些状态定义了不同的背景色，而$(this).css('background-color')只会返回当前元素实际应用的样式——也就是伪类生效后的颜色。下面给你几个可行的解决方案：

方案1：提前缓存原始背景色（通用所有Bootstrap版本） #

页面加载完成后，按钮还没被hover或点击，这时候获取的就是原始背景色，我们可以把它存在元素的data属性里，点击时直接取这个缓存值：

// 页面加载时缓存每个.btn-primary的原始背景色
$(document).ready(function() {
  $('.btn-primary').each(function() {
    $(this).data('original-bg', $(this).css('background-color'));
  });

  // 点击按钮时获取缓存的原始颜色
  $('.btn-primary').click(function() {
    const originalBackgroundColor = $(this).data('original-bg');
    console.log('原始背景色:', originalBackgroundColor);
    // 这里可以做你需要的操作
  });
});

方案2：直接获取Bootstrap CSS变量（Bootstrap 5+适用） #

Bootstrap 5开始大量使用CSS变量，.btn-primary的原始背景色对应的变量是--bs-btn-bg，我们可以通过getComputedStyle直接读取这个变量的值，不需要提前缓存：

$('.btn-primary').click(function() {
  const computedStyles = getComputedStyle(this);
  const originalColor = computedStyles.getPropertyValue('--bs-btn-bg').trim();
  console.log('原始背景色:', originalColor);
});

这个方法更简洁，而且如果后续通过CSS修改了按钮的原始颜色，也能自动拿到最新值。

方案3：从样式表中查找原始规则（旧版Bootstrap适用） #

如果用的是Bootstrap 4及更早版本，没有CSS变量，可以遍历页面的样式表，找到.btn-primary对应的原始背景色规则：

// 定义函数查找指定选择器的原始背景色
function getOriginalBgFromStylesheet(selector) {
  for (const sheet of document.styleSheets) {
    try {
      for (const rule of sheet.cssRules) {
        // 匹配目标选择器（注意可能有多个规则，优先精确匹配）
        if (rule.selectorText === selector && rule.style.backgroundColor) {
          return rule.style.backgroundColor;
        }
      }
    } catch (e) {
      // 跨域的样式表会抛出权限错误，直接跳过
      continue;
    }
  }
  return null;
}

// 点击时调用函数获取颜色
$('.btn-primary').click(function() {
  const originalColor = getOriginalBgFromStylesheet('.btn-primary');
  console.log('原始背景色:', originalColor);
});

这个方法需要注意跨域样式表的问题，所以加了try-catch来避免报错。

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