2

'img'クラス内の'im'および'desc'クラスのプロパティを変更しようとしています。現在の要素をjavascript関数mOver（）およびmDown（）に渡します。画像の境界線をマウスオーバーすると、その下のテキストも変更する必要があります。これが私のコードです。

<html>
<head>
<style>
.img
    {
    margin:2px;
    border:1px solid #0000ff;
    height:90;
    width:110;
    float:left;
    text-align:center;
    }
.im
    {
    width:110px;
    height:90px;
    display:inline;
    margin:3px;
    border:1px solid #ffffff;
    }
.desc
    {
    text-align:center;
    font-weight:normal;
    width:120px;
    margin:2px;
    }
</style>
<script>
function mOver(a)
    {
    a.style.border="10px solid #0000ff";
    a.getElementByClassName("desc").innerHTML="Click on the image";
    }
function mDown(a)
    {
    a.style.border="1px solid #ffffff";
    a.getElementByClassName("desc").innerHTML="You have clicked already";
    }
</script>
</head>
<body>
<div class="img" onmouseover="mOver(this)" onmouseout="mDown(this)">
    <a target="_blank" href="abc.png">
    <img class="im" src="abc.png"></a>
    <div class="desc">ABC</div>
</div>
<div class="img" onmouseover="mOver(this)" onmouseout="mDown(this)">
    <a target="_ blank" href="def.png">
    <img class="im" src="def.png"></a>
    <div class="desc">DEF</div>
</div>
</body>
</html>

画像の下のテキストは、必要に応じて変更されていません。線がおかしいと思います

a.getElementByClassName("desc").innerHTML="You have clicked already";

私はJavaScriptに比較的慣れていないので、ここで何が問題なのか教えてください。とにかく事前に感謝します

4

2 に答える 2

2

getElementsByClassName「s」を付ける必要があります。また、変更する要素のインデックスをマークするinnerHTML必要があります。最初の要素を変更したい場合は、次のようにします。

a.getElementsByClassName("desc")[0].innerHTML = "You have clicked already";

配列は0インデックスであるため、これにより、メソッドによって返される配列の最初の要素が変更されます。

ただし、そのクラス名を持つすべての要素を変更する場合は、ループする必要があります。

var elements = a.getElementsByClassName("desc");

for (var i = elements.length; i--;) {
    elements[i].innerHTML = "You have clicked already";
}
于 2012-12-24T13:43:12.163 に答える
1

使用しようとしているメソッドが呼び出されgetElementsByClassName（ではなく複数の要素が見つかることを期待しgetElementByIdます）、ノードリストを返します。したがって、あなたの行は次のようになります。

a.getElementsByClassName("desc")[0].innerHTML="You have clicked already";

ドキュメントについては、NodeListsのMDNをお読みください

于 2012-12-24T13:44:21.303 に答える