Question

我希望在单击按钮后将光标悬停在具有“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时，它才起作用。为什么这不适合上课？

Answer 1

它不起作用的原因是因为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;
}

Answer 2

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

.one {
    cursor: pointer;
}

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

切换到getElementsByClassName()的原因不会自动起作用，因为它会返回NodeList元素集合。此集合类似于数组，您必须访问其编号属性才能访问对其匹配的元素的引用。

在JavaScript中使用getElementsByClass更改游标？

2 个答案: