html中如何實現表格移入移出時背景顏色改變?(兩種方法)


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屬性。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM