자바 스크립트 : mouseout시 원본 innerHTML을 반환하십시오.

Question

이 매우 기본적인 질문은 유감입니다. 나는 아주 새로운 javascript와 그것을 배우고 있습니다. 내가 하나 쉽게 problem-

에 붙어 이것은 내가

를 뭐하고 노력하고 무엇을 나는 마우스 오버에이 헤더의 innerHTML을 들어간 상태입니다 일부 innertext

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

이있는 헤더가 like-

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

잘 mouseout 나는이 헤더 태그에 대해 원래 innerHTML을 얻기 위해 동일한 작업을 수행합니다.

function fun2() 
{ 

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

} 

그러나 기능 onmouseout

는이 경우에 a입니다, 내가 innerHTML을 변경 보여줍니다.

어떻게 원래 innerHTML을 얻을 수 있습니까 sample onmouseout?

저는 이것을 자바 스크립트로 만들고 싶습니다.

나는 다른 방법이 더

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

전역 변수에 첫 번째 innerHtml을 저장하고이 변수를 사용하여 첫 번째 innerHtml을 백업합니다.

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

function fun2() 
{ 

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

} 

Answer 2

당신은 어떻게 든 원래의 값을 저장해야합니다 :

var originalInnerHTML = ""; 

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

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

는 현재 당신은 단지 기존의 innerHTML을 얻을하고 새로운 innerHTML을로 설정 - 항상 같을 것입니다. 먼저 필요가 다른 곳에 보관하도록

당신은 요소의 innerHTML을 변경 한 후

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

Answer 3

, 이전 데이터는 이전 데이터를 얻기 위해

을 사라 : 그래서이 라인은 아무것도 절대 변경 .

예 : 마우스 오버시 원래 HTML을 숨겨진 div에 먼저 복사 할 수 있으며 mouseout시 숨겨진 div에서 주 div로 다시 복사 할 수 있습니다.

희망이 도움이됩니다.

Answer 4

매우 일반 버전은 다음과 같습니다

먼저 마크 업을 약간 수정 :

<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; 
} 

그냥이 답변에 코멘트를 남겨 나는 돌아올 것이다 Object의를 만드는 더 this에 대한 설명과 필요한 경우 자세한 내용은 ... 행운을 빌어 요 !!

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", ""); 
}