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

私に敬意を表して、

単純なタグで画像を表示しようとするとどうなりますか? あなた見えますか？

いえ

<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 に答える
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 に答える