使用JavaScript更改背景重复图像。-ChangebackgroundrepeatimagewithJavaScript

I'm trying to create a script that changes the repeated background image of an element, on the mouseover event. Unfortunately it does not work properly. I have found several possible ways to do this with Javascript but none of them has worked for me. How can I solve this problem?

我正在尝试创建一个脚本，它可以改变一个元素在mouseover事件上的重复背景图像。不幸的是，它不能正常工作。我找到了几种可能的方法来使用Javascript，但是没有一个方法对我有效。我该如何解决这个问题?

The following piece of code is not working properly:

下面这段代码不能正常工作:

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

But if I try to use backgroundColor property, it works fine:

但是如果我尝试使用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";

3 个解决方案

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

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

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa