时间戳

首页 > 解决方案 > javascript：恢复div的背景颜色

javascript - javascript：恢复div的背景颜色

问题描述

在我的 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 自动生成）

标签： javascriptjqueryhtmlcss

解决方案

@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>

推荐阅读