JavaScript学習メモ(2) マウス通過時にdivブロックの背景色を変更するコード_基礎知識

コードの HTML 部分:

コードをコピー コードは次のとおりです:

マウスが上を通過したときに背景色を変更します

マウスが上を通過したときに背景色を変更しますマウス通過時の背景色

マウス通過時の背景色変更

JavaScript部分コードの内容:
マウスが上を通過すると、li class="current" クラスを追加し、マウスが離れると、背景色を変更する目的を達成するためにこのクラスを削除します

コードをコピーします コードは次のとおりです: window.onload = function() {

var lis = document.getElementsByTagName(" li");

for (var i=0; ilis[i].onmouseover = function() {
this.setAttribute("class", "current ");
}
lis[i].onmouseout = function() {
this.setAttribute("class", "");
}
}
}


CSS パーツ コード:

コードをコピー コードは次のとおりです: ul li.current {

background-color:red;

cursor:pointer;
}


上記のコードは主に、誰もが JS について詳しく知ることができるようにするためのものです。 CSS を実装したバージョンを以下に示します。

マウスが上を通過したときに背景色を変更します<style type="text/css"> ul li:hover { background-color:red; cursor:pointer; } </style> <ul>マウスが上を通過したときに背景色を変更します<li> </li>マウスが上を通過したときに背景色を変更します<li> </li>マウスが上を通過したときに背景色を変更します<li> </li> <li> </ul>
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、 を実行するために更新する必要があります]