如何将元素当前CSS值存入变量且不受元素样式变更影响？

我明白你遇到的困扰了——你想用jQuery保存表格行的原始背景色，结果发现鼠标在不同行之间移动时，之前存的颜色总是被覆盖，导致移出时恢复的颜色完全不对。这其实是因为你用了共享的全局变量或者统一的存储容器，所有行都在修改同一个值，自然会互相干扰。

问题根源 #

你的初始代码里用了全局变量currentColor，所有<tr>元素hover时都会更新这个变量的值。比如先hover红色行，变量存了红色；接着hover绿色行，变量就被改成绿色了。这时候再移出红色行，它会去取currentColor里的绿色，结果自然出错。

后来尝试的.data()方法也踩了同样的坑：你把所有行的颜色都存在同一个<div>的data里，后面的行直接覆盖了前面的存储值，最终还是拿不到当前行的原始颜色。

正确解决方案：给每个元素单独存储原始值 #

我们需要把每个<tr>的原始背景色存在它自己的data属性里，这样每个元素的存储是独立的，不会被其他行的操作干扰。代码如下：

$("tr").hover(function () {
  // 只在第一次hover时存储原始颜色，避免重复覆盖
  if (!$(this).data("originalColor")) {
    $(this).data("originalColor", $(this).css("background-color"));
  }
  $(this).css("background-color", "#f7f7f7");
}).mouseout(function () {
  // 从当前元素的data中取出自己的原始颜色
  $(this).css("background-color", $(this).data("originalColor"));
});

对应的HTML结构保持不变：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr style="background-color:#FF0000"><td>Foo</td></tr>
  <tr style="background-color:#00FF00"><td>Foo</td></tr>
  <tr style="background-color:#0000FF"><td>Foo</td></tr>
</table>

代码说明 #

• 鼠标hover到某一行时，先检查这行是否已经存储过原始颜色：如果没有，就把它当前的背景色存在自己的originalColor data属性里。
• 然后将背景色切换为hover状态的#f7f7f7。
• 鼠标移出时，直接从当前行的data中取出它自己的原始颜色，恢复回去。

这样每个行的原始颜色都独立存储，不会被其他行的操作影响，完美解决你的问题。

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