我正在尝试创建一个脚本,用于在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";
答案 0 :(得分:4)
写一个CSS类并在你的JavaScript中调用它
document.getElementById("menu_" + modid + "_" + i).className = "yourcssclass"
看看会发生什么。
答案 1 :(得分: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>
答案 2 :(得分:1)
Homour me,
如果您尝试使用简单标记显示图像会发生什么?你看到了吗?
即
<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";