javascript實現的滑鼠懸浮當前td單元格變色效果

admin發表於2017-03-31
JavaScript

本章介紹一下如何利用原生的javascript實現當滑鼠懸浮於當前單元格的時候，能夠讓其背景變色。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>  
<style type="text/css"> 
.table{ 
  width:300px; 
  height:100px; 
  border:1px solid #ccc; 
  border-collapse:collapse; 
} 
.table td,.table th { 
  border:1px solid #ccc; 
  padding:5px; 
} 
</style> 
<script>
window.onload=function(){
  var otable=document.getElementById("table"); 
  var preTd=null;
  otable.onmouseover=function(ev){
    var ev=window.event||ev;
    var target=ev.target||ev.srcElement;
    if(target.tagName=="TD"){
      if(preTd!=null){
        preTd.style.backgroundColor="";
      }
      target.style.backgroundColor="blue";
      preTd=target
    }
  }
}
</script>
</head> 
<body> 
<table id="table" class="table"> 
  <thead> 
    <tr> 
      <th>螞蟻部落一</th> 
      <th>螞蟻部落二</th> 
    </tr> 
  </thead> 
  <tr> 
    <td>javascript教程</td> 
    <td>jQuery教程</td> 
  </tr> 
  <tr> 
    <td>HTML教程</td> 
    <td>div css教程</td> 
  </tr> 
</table> 
</body> 
</html>

上面的程式碼實現了我們的要求，當滑鼠懸浮的時候能夠實現當前單元格背景變色效果，下面介紹一下它的實現過程。

一.程式碼註釋:

1.window.onload=function(){}，當文件內容完全載入完畢再去執行函式中的程式碼。

2.var otable=document.getElementById("table")，獲取id屬性值為table的元素物件。

3.var preTd=null，宣告一個變數並賦初值為null，它用來儲存上一個滑鼠懸浮的單元格。

4.otable.onmouseover=function(ev){}，這裡是為table註冊onmouser事件處理函式，並沒有直接註冊在td單元格上，這裡採用是利用事件冒泡的原理實現此功能，這樣就不用在每一個td單元格上註冊事件處理函式了。

5.var ev=window.event||ev，實現事件物件在各個瀏覽器的相容性效果。

6.var target=ev.target||ev.srcElement，獲取事件源物件。

7.if(target.tagName=="TD")，判斷滑鼠懸浮的元素是否是td標籤。

8.if(preTd!=null){preTd.style.backgroundColor="";}，首先將前一個td單元格的北京顏色清空。

9.target.style.backgroundColor="blue"，設定當前懸浮的單元格的背景顏色。

10.preTd=target,將當前懸浮的td單元格物件賦值給preTd。

二.相關閱讀:

1.onmouseover事件可以參閱javascript mouseover 事件一章節。

2.var ev=window.event||ev可以參閱var ev=window.event||ev的作用是什麼一章節。

3.target屬性可以參閱javascript event.target一章節。

4.srcElement屬性可以參閱javascript event.srcElement一章節。

5.tagName屬性可以參閱javascipt tagName一章節。

相關文章