Question

我正在尝试更改＆＃39; im＆＃39;和＆＃39; desc＆＃39;课程内容＆＃39; img＆＃39; class.I我将当前元素传递给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的新手，所以请告诉我这里有什么问题。提前谢谢

Answer 1

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

Answer 2

您尝试使用的方法称为getElementsByClassName（它希望找到多个元素而不是getElementById）并返回节点列表。因此，您的行应为：

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

有关文档，请阅读 MDN on NodeLists

改变类元素的属性

2 个答案: