在JavaScript中更改與getElementsByClass的遊標？

我希望我的光標在單擊按鈕後懸停在類爲「one」的元素上時成爲一隻手。這裏是我的代碼在JavaScript中更改與getElementsByClass的遊標？

<!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（「1」），改變了從「一」類的元素，以「一」 ID之一。爲什麼這不和班級一起工作？

來源

2012-10-20 WillumMaguire

您可以通過使用CSS避免在此處使用JavaScript。

.one { 
    cursor: pointer; 
}

原因JavaScript的沒有自動工作是因爲getElementById()（如果成功）返回一個參考的元素，你可以在設置屬性。

切換到getElementsByClassName()未能自動工作的原因是因爲它返回了一個元素集合NodeList。這個集合就像一個數組，你必須訪問它的編號屬性才能訪問它所匹配元素的引用。

來源

2012-10-20 21:05:16 alex

謝謝，我當時沒有意識到這一點。儘管如此，我很好奇它爲什麼沒有按照我的方式工作？ – WillumMaguire

@WillumMaguire我添加了一個解釋。 – alex

它不工作的原因是因爲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-20 21:07:25

謝謝，這個例子確實有幫助。但我會用CSS – WillumMaguire

你真的，*真的*應該！ =）這就是*用於*的地方，將表示從結構和邏輯中分離出來;當然，你絕對受歡迎，我很高興能夠得到（一些）幫助！ =） –

document.getElementsByClassName（）not document.getElementByClass – Switch

在JavaScript中更改與getElementsByClass的遊標？

回答

相關問題