jQuery获取点击元素CSS属性异常：点击按钮得到hover背景色问题排查

嘿，这个问题我之前踩过坑！原因其实特别直观——当你点击按钮的那一刻，鼠标还没来得及离开按钮，此时元素正处于:hover的激活状态，所以$(this).css('background-color')会读取当前生效的hover样式，而不是默认状态的背景色。

下面给你两个实用的解决办法：

方法1：延迟读取样式 #

给获取操作加一个极短的延迟，等:hover状态自动消失后再读取，10毫秒就足够了，用户完全感知不到延迟：

$('button').click(function() {
  setTimeout(() => {
    const bgColor = $(this).css('background-color');
    console.log(bgColor);
  }, 10);
});

方法2：提前存储默认背景色 #

如果按钮的默认背景色不会动态变化，你可以在页面加载时就把默认值存起来，点击时直接用这个预存的值：

// 页面加载完成时存储默认背景色
const defaultBtnBg = $('button').css('background-color');

$('button').click(function() {
  console.log(defaultBtnBg); // 直接使用预存的默认值
});

如果你的按钮背景色是动态修改过的（比如点击后手动改变过），优先用第一种方法，它能准确获取到修改后的非hover状态颜色。

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