JavaScript로 배경 반복 이미지 변경

Question

mouseover 이벤트에서 요소의 반복 된 배경 이미지를 변경하는 스크립트를 만들려고합니다. 불행히도 제대로 작동하지 않습니다. JavaScript로이 작업을 수행 할 수있는 여러 가지 방법을 발견했지만 그 중 아무 것도 나를 위해 일하지 않았습니다. 이 문제를 어떻게 해결할 수 있습니까?

while (document.getElementById("content_" + modid + "_" + i) != null) { 
     document.getElementById("content_" + modid + "_" + i).style.display = "none"; 
     document.getElementById("menu_" + modid + "_" + i).style.backgroundImage = "url(psycho_normal.jpg)"; 
     document.getElementById("menu_" + modid + "_" + i).style.backgroundPosition = "top left"; 
     document.getElementById("menu_" + modid + "_" + i).style.backgroundRepeat = "repeat-x"; 
     i++; 
    } 
    document.getElementById("menu_" + modid + "_" + ind).style.backgroundImage = "url(phycho_hover.jpg)"; 
    document.getElementById("menu_" + modid + "_" + ind).style.backgroundPosition = "top left"; 
    document.getElementById("menu_" + modid + "_" + ind).style.backgroundRepeat = "repeat-x"; 

를하지만의 backgroundColor 속성을 사용하려고하면, 그것을 잘 작동합니다 :

다음 코드 조각은 제대로 작동하지

while (document.getElementById("content_" + modid + "_" + i) != null) { 
     document.getElementById("content_" + modid + "_" + i).style.display = "none"; 
     document.getElementById("menu_" + modid + "_" + i).style.backgroundColor = "#000000"; 
     i++; 
    } 
    document.getElementById("menu_" + modid + "_" + ind).style.backgroundColor = "#ff0000"; 

Answer 1

CSS 클래스 쓰기에 전화하여 이와 같은 자바 스크립트는

document.getElementById("menu_" + modid + "_" + i).className = "yourcssclass" 

그리고 어떻게되는지보십시오.

Answer 2

이 코드는 저에게 효과적입니다. 어딘가에 코드에 버그가있을 수 있습니까? 브라우저에서 자바 스크립트 콘솔을 사용하도록 설정하고 거기에 무엇이 기록되어 있는지 확인하십시오.

<div id="menu_a_0" onmouseover="doit(0);" style="width:200px;height: 200px;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> 
<div id="menu_a_1" onmouseover="doit(1);" style="width:200px;height: 200px;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> 
<div id="menu_a_2" onmouseover="doit(2);" style="width:200px;height: 200px;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> 

<div id="content_a_0"></div> 
<div id="content_a_1"></div> 
<div id="content_a_2"></div> 

<script> 
    function doit(ind) { 
     modid = "a"; 
     i = 0; 

     while (document.getElementById("content_" + modid + "_" + i) != null) { 
      document.getElementById("content_" + modid + "_" + i).style.display = "none"; 
      document.getElementById("menu_" + modid + "_" + i).style.backgroundImage = "url(psycho_normal.jpg)"; 
      document.getElementById("menu_" + modid + "_" + i).style.backgroundPosition = "top left"; 
      document.getElementById("menu_" + modid + "_" + i).style.backgroundRepeat = "repeat-x"; 
      i++; 
     } 
     document.getElementById("content_" + modid + "_" + ind).style.display = "block"; 
     document.getElementById("menu_" + modid + "_" + ind).style.backgroundImage = "url(phycho_hover.jpg)"; 
     document.getElementById("menu_" + modid + "_" + ind).style.backgroundPosition = "top left"; 
     document.getElementById("menu_" + modid + "_" + ind).style.backgroundRepeat = "repeat-x"; 

     return true; 
    } 
</script> 

Answer 3

Homour 나, 간단한 태그로 이미지를 표시하려고하면 어떻게됩니까

? 너는 그것을 보느냐?

e.e. 등 또한

<img src="phycho_hover.jpg" /> 

, 여담에서 getElementById로 여러 번 호출이 일기 좋게이나 성능이 같은 시도 도움이되지 않습니다

var objElem = document.getElementById("content_" + modid + "_" + i); 
while (objElem != null) { 
    objElem.style.display = "none"; 
    objElem.style.backgroundImage = "url('psycho_normal.jpg')"; 
    objElem.style.backgroundPosition = "top left"; 
    objElem.style.backgroundRepeat = "repeat-x"; 
    i++; 
    objElem = document.getElementById("content_" + modid + "_" + i); 
} 

//same idea with these: 
document.getElementById("menu_" + modid + "_" + ind).style.backgroundImage = "url('phycho_hover.jpg')"; 
document.getElementById("menu_" + modid + "_" + ind).style.backgroundPosition = "top left"; 
document.getElementById("menu_" + modid + "_" + ind).style.backgroundRepeat = "repeat-x";