html中如何實現表格移入移出時背景顏色改變？（兩種方法）
一、總結
1、通過css的table標簽的hover屬性：
10 #tab:hover{ 11 background: green 12 }
2、通過js的onmouseover(),onmouseout()事件：
16 <table id="tab" border="1" onmouseover="change('red')" onmouseout="change('pink')">
51 function change(c){ 52 var tab=document.getElementById('tab') 53 tab.style.background=c 54 }
二、html中如何實現表格移入移出時背景顏色改變？（兩種方法）
1、動態改變表格背景色案例說明
- 實例描述：
JS實現鼠標移入移出時表格背景色變化
- 案例要點：
通過onmouseover(),onmouseout()以及CSS的選擇器均可以實現類似的效果，具體用那種實現方式結合具體情況使用。
三、代碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>8.4 演示文檔</title> 6 <style type="text/css"> 7 /*#tab{ 8 background: orange 9 } 10 #tab:hover{ 11 background: green 12 }*/ 13 </style> 14 </head> 15 <body> 16 <table id="tab" border="1" onmouseover="change('red')" onmouseout="change('pink')"> 17 <caption>表格名稱</caption> 18 <thead> 19 <tr> 20 <th colspan="3">標題1</th> 21 </tr> 22 </thead> 23 <tbody> 24 <tr> 25 <td>單元格11</td> 26 <td>單元格12</td> 27 <td>單元格13</td> 28 </tr> 29 <tr> 30 <td>單元格21</td> 31 <td>單元格22</td> 32 <td>單元格23</td> 33 </tr> 34 <tr> 35 <td>單元格31</td> 36 <td>單元格32</td> 37 <td>單元格33</td> 38 </tr> 39 </tbody> 40 <tfoot><td>備注：</td><td colspan="2"></td></tfoot> 41 </table> 42 <script> 43 // function change1(){ 44 // var tab=document.getElementById('tab') 45 // tab.style.background='orange' 46 // } 47 // function change2(){ 48 // var tab=document.getElementById('tab') 49 // tab.style.background='green' 50 // } 51 function change(c){ 52 var tab=document.getElementById('tab') 53 tab.style.background=c 54 } 55 </script> 56 </body> 57 </html>
四、測試題-簡答題
1、如何設置一個元素的hover屬性？
解答：在css樣式中設置，選擇到元素然后:（冒號）hover{}來設置，如果是id就是#號，是類就是點號。
2、如何在css中設置一個標簽的樣式？
解答：標簽名{ 屬性:值 }，就是選擇到元素，然后在大括號中設置值，屬性和值之間是冒號。
3、在css中設置樣式的時候，屬性和值之間是什么符號？
解答：英文狀態下的冒號。
4、在css中設置樣式的時候，屬性設置在什么符號中？
解答：大括號
5、js中鼠標移入某元素和移出某元素的事件名字是什么？
解答：onmouseover()和onmouseout()。
6、如何給一個元素添加鼠標移出事件？
解答：在元素的標簽中添加onmouseout="函數名()"; onmouseout="change()"。
7、js函數調用的時候如何帶字符串參數？
解答：onmouseover="change('red')"。 括號里面是單引號包起來的字符串。
8、js中如何實現帶參數函數？
解答：和php、java中一樣，function change(c){}。
9、如何通過js實現表格移入移出時背景顏色改變？
解答：設置一個帶參數的函數，在函數里面講表格dom對象的style的background屬性賦值為這個顏色參數，然后在標簽中通過onmouseover和onmouseout調用。
10、如何通過css實現表格移入移出時背景顏色改變？
解答：在css樣式設置中，通過css選擇器獲取元素，然后設置background屬性。