0

我希望我的光标在单击按钮后悬停在具有“one”类的元素上时是一只手。这是我的代码

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" language="JavaScript">
    function cursor()
    {
    document.getElementByClass("one").style.cursor="pointer";
    }
</script>
<h1 class="one">Mouse over this text!</h1>
</head>
<body>
<p class="fff">not me!</p>
<button type="button" onclick="cursor()">Change cursor</button>
</body>
</html>

到目前为止，当我将其更改为 getElementById("one") 并将其中一个元素从“one”类更改为“one”id 时，它才起作用。为什么这也不适用于课堂？

4

2 回答 2

3

它不起作用的原因是因为getElementsByClassName()返回多个元素的节点列表，您必须单独访问：

function cursor() {
    var elems = document.getElementByClass("one");
    for (var i=0, len=elems; i<len; i++) {
        elems[i].style.cursor = 'pointer';
    }
}

但是真的没有必要用 JavaScript 做这个，使用 CSS：

.one {
    cursor: pointer;
}
于 2012-10-20T21:07:25.720 回答
2

您可以通过使用 CSS 来避免在此处使用 JavaScript。

.one {
    cursor: pointer;
}

JavaScript 没有自动工作的原因是因为getElementById()（如果成功）返回对元素的单个引用，您可以在其中设置属性。

切换到getElementsByClassName()没有自动工作的原因是因为它返回 a NodeList，一个元素的集合。这个集合就像一个数组，你必须访问它的编号属性才能访问对它匹配的元素的引用。

于 2012-10-20T21:05:16.597 回答