0

ボタンをクリックした後、クラスが「1」の要素にカーソルを合わせると、カーソルが手になります。これが私のコードです

<!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") に変更し、要素の1つを「1」クラスから「1」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()自動的に機能しなかった理由はNodeList、要素のコレクションである を返すためです。このコレクションは配列のようなもので、番号付きのプロパティにアクセスして、一致した要素への参照にアクセスする必要があります。

于 2012-10-20T21:05:16.597 に答える