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

有关文档，请阅读MDN on NodeLists

于 2012-12-24T13:44:21.303 回答