javascript：恢复div的背景颜色答案

【问题标题】：javascript: restoring the background color of a divjavascript：恢复div的背景颜色
【发布时间】：2018-05-28 06:18:07
【问题描述】：

在我的 js 代码中：

$(document).ready(function () {
    $(".row.rowstriped:even").css("background-color", "lightGray");

});

var oldBackColor;
function DoRowGold(el) {

    var id = el.id;
    sId = "#" + id;
    oldBackColor = $(sId).css('background-color'); 
    $(sId).css('background-color', '#FFD700');

}

function DoRowNormal(el) {
    var id = el.id;
    sId = "#" + id;
    $(sId).css('background-color', oldBackColor);
}

在我的 HTML 中：

<div id="someid" class="row rowstriped" onmouseover="DoRowGold(this)" onmouseout="DoRowNormal(this)">

在我的 CSS 中，我定义了一个空的行条纹样式。通过这种方式，我确信 jquery 代码只影响具有这个附加类的行。

css:

.rowstriped{}

现在我希望在加载文档时，行变为交替颜色，但是当用户用鼠标在行上移动时，其背景颜色变为黄色。然后，当它用鼠标离开该行时，背景颜色应该与根据 jquery 函数完成的条带化返回的颜色相同。我试图在更改之前存储 div 的旧颜色以便在 mouseout 事件中重置它，但没有成功。我怎样才能做到这一点？

**编辑我忘记在我的代码示例中给她 id，但在我的真实代码中有一个 id（由 Razor 自动生成）

【问题讨论】：

我在你的 div 上没有看到任何 id，那么你希望 el.id 怎么工作
为什么要用javascript来改变颜色，你可以简单的用户：hover
@Carsten 这是一个代码示例，html 是从 razor 视图中提取的，我不得不将 Id 放在适当的位置。
在我的代码中，条纹和颜色的变化都有效，只有背景不会恢复到旧颜色。

标签： javascript jquery html css

【解决方案1】：

@user1238784，在这里你忘记提供你的 div 元素的 ID 尝试使用给定的解决方案

$(document).ready(function () {
    $(".row.rowstriped:even").css("background-color", "lightGray");

});

var oldBackColor;
function DoRowGold(el) {
  
    var id = $(el).attr("id");
    sId = "#" + id;
    oldBackColor = $(sId).css('background-color'); 
    console.log(oldBackColor);
    $(sId).css('background-color', '#FFD700');

}
function DoRowNormal(el) {

    var id = el.id;
    sId = "#" + id;
    $(sId).css('background-color', oldBackColor);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 
<div class="row rowstriped" Id="divColChange" style="border: 1px solid red; height:50px; width:50px" onmouseover="DoRowGold(this)" onmouseout="DoRowNormal(this)"></div>

【讨论】：

【解决方案2】：

您可以使用如下简单的 CSS 实现此目的：

  table {
  border-collapse: collapse;
}

td {
  padding: 10px 20px;
  border: 1px solid #ddd;
}

.rowstriped tr:nth-child(odd) {
  background-color: #ddd;
}

.rowstriped tr:hover {
  background-color: gold;

<table class="rowstriped">
  <tbody>
    <tr>
      <td>
        John
      </td>
      <td>
        Smith
      </td>
    </tr>
    <tr>
      <td>
        Peter
      </td>
      <td>
        Lucas
      </td>
    </tr>
    <tr>
      <td>
        Ammy
      </td>
      <td>
        Joseph
      </td>
    </tr>
    <tr>
      <td>
        Molly
      </td>
      <td>
        Hooper
      </td>
    </tr>
    <tr>
      <td>
        James
      </td>
      <td>
        Luke
      </td>
    </tr>
  </tbody>
</table>

【讨论】：

.rowstriped tr:nth-child(odd) { background-color: #ddd; } 是 css3，但我想用 javascript 来做
当你可以CSS它时，你需要JS的确切原因是什么？
不是所有浏览器都支持css3？
认真的吗？除非你正在制作一个网站来运行 IE8。大多数浏览器都支持 CSS3

【解决方案3】：

好的，我决定使用 css：

.rowstriped:nth-child(odd) {
        background-color: #ddd;
    }

    .rowstriped:hover {
        background-color: gold;
    }

【讨论】：