查看: 452|回复: 0

[DIV/CSS] 《DOM编程艺术》中CSS—DOM的总结(二)

发表于 2016-6-28 08:04:16
尚学堂AD

前言:接上篇,本篇有两个内容:一个是Demo:当鼠标hover到表格的一行上时这行表格字体加粗。。。好了,废话少说,开始!!!

------------------严肃的分割线------------------

1.一个Demo

需求:创建一个表格,当鼠标hover到一行上时,改变这行中字体的样式,鼠标移走恢复原样。

(1)HTML部分
  1. <table>
  2. <caption>这是一个表格</caption>
  3. <thead>
  4. <tr>
  5. <th>When</th>
  6. <th>Where</th>
  7. </tr>
  8. </thead>
  9. <tbody>
  10. <tr>
  11. <td>9月9日</th>
  12. <td>北京路25号人民广场</td>
  13. </tr>
  14. <tr>
  15. <td>10月9日</th>
  16. <td>南京路28号人民博物馆</td>
  17. </tr>
  18. <tr>
  19. <td>11月9日</th>
  20. <td>上海路20号人民艺术中心</td>
  21. </tr>
  22. </tbody>
复制代码
(2)CSS部分

要美观,还是稍微写点样式吧

  1. table {
  2. margin: auto;
  3. border: 1px solid gray;
  4. margin-top: 30px;
  5. }
  6. caption {
  7. margin: auto;
  8. font-weight: bold;
  9. }
  10. th {
  11. border: 1px dotted gray;
  12. background-color: gainsboro;
  13. }
  14. th,
  15. td {
  16. width: 10em;
  17. padding: 0.5em;
  18. }
复制代码
(3)js代码部分

思路就是:获取到所有的tr,然后遍历tr,并对tr做CSS样式修改。
-首先判断浏览器支不支持getElementsByTag
-其次获取所有的tr标签
-然后遍历,取出每一个tr标签,添加onmouseover事件和onmouseout事件,后面用匿名函数执行样式更换操作。

  1. function highlightRows(){
  2. if(!document.getElementsByTagName){
  3. return false;
  4. }
  5. var trlist = document.getElementsByTagName("tr");
  6. for(var i = 0; i < trlist.length; i++){
  7. trlist[i].onmouseover = function(){
  8. this.style.fontWeight = "bolder";
  9. this.style.color = "red";
  10. }
  11. trlist[i].onmouseout = function(){
  12. this.style.fontWeight = "normal";
  13. this.style.color = "black";
  14. }
  15. }
  16. }
复制代码

当然要在文档加载完成后执行这个函数,所以老熟人addLoadEvent函数又再次出现。

  1. function addLoadEvent(func){
  2. //把现有的window.onload存入变量oldonload
  3. var oldonload = window.onload;
  4. if(typeof window.onload != 'function'){
  5. window.onload = func;
  6. }else{
  7. window.onload = function(){
  8. oldonload();
  9. func();
  10. }
  11. }
  12. }
复制代码

最后在文档加载完成后,添加这个函数到addLoadEvent函数。

  1. addLoadEvent(highlightRows);
复制代码
2.完整源代码

老规矩了,上完整源代码,你可以复制到本地看看效果,have fun ~~~欢迎留言评论拍砖交流

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>exampl</title>
  6. <style>
  7. table {
  8. margin: auto;
  9. border: 1px solid gray;
  10. margin-top: 30px;
  11. }
  12. caption {
  13. margin: auto;
  14. font-weight: bold;
  15. }
  16. th {
  17. border: 1px dotted gray;
  18. background-color: gainsboro;
  19. }
  20. th,
  21. td {
  22. width: 10em;
  23. padding: 0.5em;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <table>
  29. <caption>这是一个表格</caption>
  30. <thead>
  31. <tr>
  32. <th>When</th>
  33. <th>Where</th>
  34. </tr>
  35. </thead>
  36. <tbody>
  37. <tr>
  38. <td>9月9日</th>
  39. <td>北京路25号人民广场</td>
  40. </tr>
  41. <tr>
  42. <td>10月9日</th>
  43. <td>南京路28号人民博物馆</td>
  44. </tr>
  45. <tr>
  46. <td>11月9日</th>
  47. <td>上海路20号人民艺术中心</td>
  48. </tr>
  49. </tbody>
  50. </table>
  51. <!--js代码-->
  52. <script>
  53. function highlightRows(){
  54. if(!document.getElementsByTagName){
  55. return false;
  56. }
  57. var trlist = document.getElementsByTagName("tr");
  58. for(var i = 0; i < trlist.length; i++){
  59. trlist[i].onmouseover = function(){
  60. this.style.fontWeight = "bolder";
  61. this.style.color = "red";
  62. }
  63. trlist[i].onmouseout = function(){
  64. this.style.fontWeight = "normal";
  65. this.style.color = "black";
  66. }
  67. }
  68. }
  69. function addLoadEvent(func){
  70. //把现有的window.onload存入变量oldonload
  71. var oldonload = window.onload;
  72. if(typeof window.onload != 'function'){
  73. window.onload = func;
  74. }else{
  75. window.onload = function(){
  76. oldonload();
  77. func();
  78. }
  79. }
  80. }
  81. addLoadEvent(highlightRows);
  82. </script>
  83. </body>
  84. </html>
复制代码


回复

使用道具 举报