1

我正在尝试创建一个脚本，在鼠标悬停事件上更改元素的重复背景图像。不幸的是，它不能正常工作。我已经找到了几种可能的方法来使用 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";
4

3 回答 3

4

编写一个 CSS 类并像这样在你的 JavaScript 中调用它

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

看看会发生什么。

于 2009-12-15T11:19:17.347 回答
1

这段代码对我有用。也许您的代码中某处有错误？尝试在浏览器中启用 JavaScript 控制台，看看那里是否记录了任何内容。

<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>
于 2009-12-15T11:21:29.107 回答
1

取悦我，

如果您尝试使用简单的标签显示图像会发生什么？你看到了吗？

IE

<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";
于 2009-12-15T11:33:20.000 回答