使用 JavaScript 更改背景重复图像答案

【问题标题】：Change background repeat image with JavaScript使用 JavaScript 更改背景重复图像
【发布时间】：2009-12-15 11:14:33
【问题描述】：

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

【问题讨论】：

您确定文件名为phycho_hover.jpg？好像打错了
是的，图片的名称是正确的。
也许您可以发布更多代码？您的内容和菜单项在 HTML 中的外观如何？如何调用 onmouseover 代码？

标签： javascript image background repeat

【解决方案1】：

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

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

看看会发生什么。

【讨论】：

非常感谢您的帮助。您的解决方案运行良好:)
这是一个 +1 来解决他的问题

【解决方案2】：

向我致敬，

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

即

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

【讨论】：

更容易阅读是的，使用 jQuery 之类的 Javascript 框架会更容易阅读（和编写）:)

【解决方案3】：

此代码对我有用。也许您的代码中有错误？尝试在浏览器中启用 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>

【讨论】：

您好，感谢您的回答。我尝试了你的建议，但没有奏效。