當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
小试牛刀JavaScript鼠标事件
生活随笔
收集整理的這篇文章主要介紹了
小试牛刀JavaScript鼠标事件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?
鼠標事件練習1
當鼠標點擊網頁某個單元格的時候，其他的單元格顏色不變，只有被點擊的單元格顏色發生變化
<style type="text/css"> *{ margin:0;} #xuankuang{ width:1200px;float:left} .xuanxiang{ width:290px; height:200px; float:left; background-color:#0F3; margin-bottom:10px; margin-right:10px; margin-left:10px} </style></head><body> <div id="xuankuang"> <div class="xuanxiang" οnclick="dianJi(this)"></div> //this代表調用自身。<div class="xuanxiang" οnclick="dianJi(this)"></div><div class="xuanxiang" οnclick="dianJi(this)"></div><div class="xuanxiang" οnclick="dianJi(this)"></div><div class="xuanxiang" οnclick="dianJi(this)"></div><div class="xuanxiang" οnclick="dianJi(this)"></div><div class="xuanxiang" οnclick="dianJi(this)"></div><div class="xuanxiang" οnclick="dianJi(this)"></div><div class="xuanxiang" οnclick="dianJi(this)"></div></div> </body><script>function dianJi(m){ //這個m是一個形式參數var b=document.getElementsByClassName("xuanxiang") 用b接收獲取的元素數組for(var i=0;i<b.length;i++){b[i].style.backgroundColor="blue";} //通過循環讓每一次鼠標放在某個位置的時候所有位置的顏色都變成藍色。m.style.backgroundColor="red"} //鼠標放在的地方變為紅色 </script>這個鼠標事件練習使用到了數組，用數組通過循環的方式使在每次鼠標點擊單元格的時候其他的單元格不變色，只有被點擊的發生顏色的變化，定義方法的時候方法名后邊的形參要注意。
?
鼠標事件練習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鼠标事件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： malefile
- 下一篇： 0069 如何在Intellij IDE