當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaWeb学习笔记：JavaScript-鼠标悬浮和离开
生活随笔
收集整理的這篇文章主要介紹了
JavaWeb学习笔记：JavaScript-鼠标悬浮和离开
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、任務：實現在水果庫存表中鼠標懸浮時該行背景顏色改變，鼠標離開后恢復原狀，且鼠標懸浮在單價單元格出鼠標箭頭表為手勢。
html代碼：
<html><head><meta charset="uf-8"><link rel="stylesheet" href="css/demo02.css"><script type="text/javascript" src="js/demo01.js"></script></head><body><div id="div_container"><div id="div_fruit_list"><table id="tbl_fruit"><tr><th class="w20">名稱</th><th class="w20">單價</th><th class="w20">數量</th><th class="w20">小計</th><th>操作</th></tr><tr><td>蘋果</td><td>5</td><td>20</td><td>100</td><td><img src="img/67a33f27_E773381_b27076b6.png" class="delImg"></td></tr><tr><td>菠蘿</td><td>4</td><td>25</td><td>100</td><td><img src="img/67a33f27_E773381_b27076b6.png" class="delImg"></td></tr><tr><td>榴蓮</td><td>3</td><td>30</td><td>90</td><td><img src="img/67a33f27_E773381_b27076b6.png" class="delImg"></td></tr><tr><td>總計</td><td colspan="4">999</td></tr></table></div></div></body> </html>css代碼：
body{margin:0;padding:0;background-color:#808080; } div{position:relative;float:left; } #div_container{width:80%;height:100%;border:0px solid blue;margin-left:10%;float:left;background-color:honeydew;border-radius:8px; } #div_fruit_list{width:100%;border:0px solid red; } #tbl_fruit{width:60%;line-height:28px;margin-top:120px;margin-left:20%; } #tbl_fruit,#tbl_fruit tr,#tbl_fruit th,#tbl_fruit td{border:1px solid gray;border-collapse:collapse;text-align:center;font-size:16px;font-family:"黑體";font-weight:lighter;color:threeddarkshadow; } .w20{width:20%; } .delImg{width:24px;height:24px; }js代碼：
window.onload=function(){ //當頁面加載完畢我們需要綁定各種事件 //根據id獲取到表格var fruitTbl=document.getElementById("tbl_fruit"); //獲取表格中的所有行var rows=fruitTbl.rows;for(var i=0;i<rows.length;i++){var tr=rows[i]; //1、綁定鼠標懸浮以及離開時設置背景顏色事件tr.onmouseover=showBGColor;tr.onmouseout=clearBGColor; //獲取tr這一行的所有單元格var cells=tr.cells;var priceTD=cell[i]; //2、綁定鼠標懸浮在單價單元格變手勢的事件priceTD.onmouseover=showHand;} }//當鼠標懸浮時顯示背景顏色 function showBGColor(){ //event:當前發生的事件 //event.srcElement:事件源 //alert(event.srcElement.tagName);---->獲取TDif(event && event.srcElement && event.srcElement.tagName=="TD"){var td=event.srcElement; //td.parentElement 表示獲取的td的父元素---->TRvar tr=td.parentElement; //如果想要通過js的代碼設置某節點的樣式，則需要加上.styletr.style.backgroundColor="navy"; //tr.cells 表示獲取這個tr中的所有單元格var tds=tr.cells;for(var i=0;i<tds.length;i++){tds[i].style.color="white";}} }//當鼠標離開時恢復原始的樣式 function celarBGColor(){if(event && event.srcElement && event.srcElement.tagName=="TD"){var td=event.srcElement;var tr=td.parentElement;tr.style.backgroundColor="transparent";var tds=tr.cells;for(var i=0;i<tds.length;i++){tds[i].style.color="threeddarkshadow";}} }//當鼠標懸浮在單價單元格時，顯示手勢 function showHand(){if(event && event.srcElement && event.srcElement.tagName=="TD"){var td=event.srcElement; //cursor：光標td.style.cursor="hand";} }效果：
?2、關于window對象
代表瀏覽器中一個打開的窗口；
| 對象 | 描述 |
| clientInfermation | 包含關于web瀏覽器的信息 |
| clipboardData | 提供了對于預定義的剪貼板格式的訪問，以便在編輯器操作中使用 |
| document | 代表給定瀏覽器窗口中的HTML文檔 |
| event | 代表事件狀態，如事件發生的元素，鍵盤狀態，鼠標位置和鼠標按鈕狀態 |
| external | 允許訪問由Microsoft Internet Exploror瀏覽器組件寄主應用程序提供的附加對象模型 |
| history | 包含了用戶已瀏覽的URL信息 |
| location | 包含關于當前URL的信息 |
| navigator | 包含關于web瀏覽器的信息 |
| screen | 包含關于客戶屏幕和渲染能力的信息 |
完結
總結
以上是生活随笔為你收集整理的JavaWeb学习笔记：JavaScript-鼠标悬浮和离开的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 爬虫利器初体验 scrapy，爬取豆瓣电
- 下一篇： gradle idea java ssm