Question

我很抱歉这个非常基本的问题。我是一个非常新的JavaScript和学习它。我遇到了一个简单的问题 -

这就是我想要做的事情 -

我的标题有一些innertext

<h1 id="bd" onmouseover="fun1()" onmouseout="fun2()"> sample</h1>

我正在鼠标悬停上对此标题的innerHTML进行查询 -

function fun1()
{
document.getElementById("bd").innerHTML="a";
}

在鼠标输出上我做同样的事情但是为这个标题标记获取原始的innerHTML。

function fun2()
{

document.getElementById("bd").innerHTML=document.getElementById("bd").innerHTML;

}

但是onmouseout函数显示我改变了innerHTML，在这种情况下是a。

如何在onmouseout上再次获得原始的innerHTML sample？

我希望这可以在javascript中完成。

我尝试了另外一种方式

function fun1()
{
document.getElementById("bd").innerHTML="a";
}
function fun3()
{
var ds=document.getElementById("bd").innerHTML;
alert(ds);

}
function fun2()
{

document.getElementById("bd").innerHTML=fun3();

}

但它也不起作用。

Answer 1

非常通用的版本如下：

首先改变你的标记：

<h1 id="bd" onmouseover="fun1(this)" onmouseout="fun2(this)"> sample</h1>

这样您就不需要在回调函数中再次查找元素。这适用于鼠标悬停的多个元素。然后你去：

function fun1(elm) {
    if (!fun1.cache) fun1.cache = {}; // extend your function with a cache
    fun1.cache[elm.id] = elm.innerHTML; // write into cache -> fun1.cache.bd
    elm.innerHTML = 'a';
}

function fun2(elm) {
    if (fun1.cache && fun1.cache[elm.id]) { // see if cache exists and...
        elm.innerHTML = fun1.cache[elm.id]; // read from it
    }
}

通过这种方式，您可以构建一个不需要额外全局变量但更接近函数的缓存系统。

下一步是仅使用一个函数并将新值作为参数发送。创建类似切换功能的东西：

<h1 id="bd" onmouseover="fun(this, 'a')" onmouseout="fun(this)"> sample</h1>

然后你的功能：

function fun(elm, newValue) {
    if (!fun.cache) fun.cache = {};
    var value = newValue || fun.cache[elm.id]; // no newValue means recover old value
    fun.cache[elm.id] = elm.innerHTML; // alway save the old value
    elm.innerHTML = value;
}

如果您需要有关this的更多解释并创建Object，请对此答案发表评论，我会回过头来了解更多详情...... 祝你好运!!

Answer 2

将第一个innerHtml存储在全局变量中，并使用此变量备份第一个innerHtml。

var oldInner = '';
function fun1()
{
oldInner  = document.getElementById("bd").innerHTML;
document.getElementById("bd").innerHTML="a";
}

function fun2()
{

document.getElementById("bd").innerHTML=oldInner;

}

Answer 3

您需要以某种方式存储原始值：

var originalInnerHTML = "";

function fun1()
{ 
    originalInnerHTML = document.getElementById("bd").innerHTML;
    document.getElementById("bd").innerHTML="a";
}

function fun2()
{
    document.getElementById("bd").innerHTML=originalInnerHTML
}

目前，您只需获取现有的innerHTML并将其设置为新的innerHTML - 它始终是相同的。所以这条线永远不会改变任何东西：

document.getElementById("bd").innerHTML=document.getElementById("bd").innerHTML;

Answer 4

一旦你更改了元素的innerhtml，旧数据就会消失

为了获取旧数据，首先需要将其存储在其他地方。

例如：在鼠标悬停时，您可以先将原始html复制到隐藏的div，然后在mouseout处再次从隐藏的div复制到主div。

希望这会有所帮助。

Answer 5

一个非常简单的实现方法是让你想要在div中显示两个文本。所以你有：

<h1 id="bd">
    <span id='sample1'>sample1</span>
    <span id='sample2' style='display: none'>a</span>
</h1>


var el = document.getElementById("bd");
el.onmouseover = function() {
    document.getElementById("sample1").setAttribute("style", "display: none");
    document.getElementById("sample2").setAttribute("style", "");
}

el.onmouseout = function() {
   document.getElementById("sample2").setAttribute("style", "display: none");
   document.getElementById("sample1").setAttribute("style", "");
}

Javascript：在mouseout上返回原始的innerHTML

5 个答案: