當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

小试牛刀JavaScript鼠标事件

發布時間：2024/4/17 javascript 33 豆豆

生活随笔收集整理的這篇文章主要介紹了小试牛刀JavaScript鼠标事件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

鼠標事件練習1

當鼠標點擊網頁某個單元格的時候，其他的單元格顏色不變，只有被點擊的單元格顏色發生變化

這個鼠標事件練習使用到了數組，用數組通過循環的方式使在每次鼠標點擊單元格的時候其他的單元格不變色，只有被點擊的發生顏色的變化，定義方法的時候方法名后邊的形參要注意。　　

鼠標事件練習2

這個練習是做的一個下拉菜單，下拉菜單帶有背景色，選項框的背景色會隨著鼠標的移動（不點擊選項框）變色，當選中其中一個選項框的時候，所有選項框隱藏，被選中的選項框的內容進到空白的選框內。

<body> <div id="xxkuang" οnclick="dianJi(this)"></div> <div id="list" style="display:none"><div class="xuanxiangka" οnmοuseοver="fangshang(this)" οnclick="dj(this)">qingdao</div><div class="xuanxiangka" οnmοuseοver="fangshang(this)" οnclick="dj(this)">jinan</div><div class="xuanxiangka" οnmοuseοver="fangshang(this)" οnclick="dj(this)">zibo</div><div class="xuanxiangka" οnmοuseοver="fangshang(this)" οnclick="dj(this)">binzhou</div><div class="xuanxiangka" οnmοuseοver="fangshang(this)" οnclick="dj(this)">linzi</div></div> </body> <script> function fangshang(n){var b=document.getElementsByClassName("xuanxiangka")//括號里的classname要加引號for(var i=0;i<b.length;i++){b[i].style.backgroundColor="white"b[i].style.color="black"}n.style.backgroundColor="red"n.style.color="white"}function dianJi(m){var l=document.getElementById("list") if(l.style.display=="none"){ //隱藏后邊的內容要帶上引號，切記！！！l.style.display="block"}else{l.style.display="none"}}function dj(p){document.getElementById("list").style.display="none"; //選中后所有的選項框隱藏document.getElementById("xxkuang").innerText=p.innerText //選中后被選中的選項框的內容進到空白的選項框內}</script>

　　點擊空白單元格的時候下拉菜單的顯示與隱藏需要用到判斷。

轉載于:https://www.cnblogs.com/gaofangquan/p/7050773.html

總結

以上是生活随笔為你收集整理的小试牛刀JavaScript鼠标事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。