H5-JavaScript（六） CSS&Dom - DOM艺术2nd Chapter9 - 卜戈的博客

H5-JavaScript（六） CSS&Dom - DOM艺术2nd Chapter9

H5-JavaScript（五）中提到， JavaScript 不仅可以改变DOM，也就是HTML 的标签结构，当然可以对标签的属性进行编辑，那么 Element.Style.Property= "xxx"就可以做CSS 相同的事情。但还是那句话，谁的事情谁做，涉及动态变动的事情JavaScript 再参与，参与的时候也最大限度的各自功能独立。

举例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>CSS-DOM</title>
 6 </head>
 7 <script>
 8     window.onload = function() {
 9         var para = document.getElementById("example");
10         para.style.color = "red";
11         para.style.fontFamily = "微软雅黑";
12     }
13 </script>
14 <body>
15     <p id="example" style="color: grey; font-family: 'Arial',sans-serif">
16         A example of paragraph.
17     </p>
18 </body>
19 </html>

注意：1、font-family中间有-的属性时，属性名采用驼峰命名法，及para.style.fontFamily不管CSS属性名有多少连字符，DOM一律采用驼峰命名法表示他们。

　　　2、DOM 的style对象只包含在HTML代码里，用style属性声明的样式，即使样式卸载文档的<head>部分和写在外部样式表里都不会进入style对象。

　　　3、element.style.property = value这里，value值必须包含在引号内（单引号双引号都可以）。

一、设置“斑马线”表格功能

效果图：

【JS】

 1 function stripeTables() {
 2     if (!document.getElementsByTagName) return false;
 3     var tables = document.getElementsByTagName("table");
 4     var odd, rows;
 5     for (var i = 0; i < tables.length; i++) {
 6         odd = false;
 7         rows = tables[i].getElementsByTagName("tr");
 8         for (var j = 0; j < rows.length; j++) {
 9             if (odd == true) {
10                 rows[j].style.backgroundColor = "#ffc";
11                 odd = false;
12             } else {
13                 odd = true;
14             };
15 
16         };
17     };
18 }
19 addLoadEvent(stripeTables);

【CSS】

 1 body{
 2     background-color: #fff;
 3 }
 4 table{
 5     margin: 0 auto;
 6     border: 1px solid #699;
 7 }
 8 caption{
 9     color: cornflowerblue;
10     font-family: fantasy;
11 }
12 th{
13     background-color: #ddd;
14 }
15 td{
16     width: 100px;
17 }

【HTML】

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>动态变化表格颜色</title>
 5     <meta charset="utf-8">
 6     <link rel="stylesheet" type="text/css" href="./../styles/changetablecolor.css" />
 7 </head>
 8 <body>
 9     <table>
10         <caption>Hellow</caption>
11         <tr>
12             <th>When</th>
13             <th>Where</th>
14         </tr>
15         <tr>
16             <td>aaa</td>
17             <td>vs</td>
18         </tr>
19         <tr>
20             <td>bbb</td>
21             <td>vsafs</td>
22         </tr>
23         <tr>
24             <td>ccc</td>
25             <td>vsafs</td>
26         </tr>
27         <tr>
28             <td>ddd</td>
29             <td>vsafs</td>
30         </tr>
31     </table>
32     <script src="./../javascripts/addLoadEvent.js"></script>
33     <script src="./../javascripts/changetablecolor.js"></script>
34 </body>
35 </html>

其实这里还是有点小瑕疵，就是 JavaScript 做了CSS 应该做的事情。

　　分析问题：

　　　　1、目前的CSS 还做不到对具体标签的样式，或者说一类相关的标签做统一样式处理。要么做起来就非常麻烦

　　　　2、 JavaScript 中有出现 Element.Style.Property = "style-value”; 好的做法style内容都放在css 文件中，而Js 只是建立关联关系，变动好调整

好的做法：

【JS】

 1 //表格斑马线功能
 2 function banmaxian() {
 3     
 4     //1. 得到table
 5     var table = document.getElementsByTagName("table")[0];
 6     //2. 遍历table中的行，可用flag 来隔行标识
 7     var rows = table.getElementsByTagName("tr");
 8     var flag = true;
 9     console.log(true);
10     for (var i = 1; i < rows.length; i++) {
11         if (flag) {
12             flag = false;
13             //3.设置 需要标识的行
14             //rows[i].setAttribute("class","test");
15             rows[i].className = "selected-tr";
16         }
17         else
18         {
19             flag = true;
20         }
21     }
22 }
23 addLoadEvent(banmaxian);

【CSS】

 1 body{
 2     background-color: #fff;
 3 }
 4 table{
 5     margin: 0 auto;
 6     border: 1px solid #699;
 7 }
 8 caption{
 9     color: cornflowerblue;
10     font-family: fantasy;
11 }
12 th{
13     background-color: #ddd;
14 }
15 td{
16     width: 100px;
17 }
18 /*伪类选择器
19 tr:hover {
20     background-color: #66ffcc;
21     font-weight: bold;
22 }*/
23 .selected-tr {
24     background-color: #66ffcc;
25 }

其实这里还是有一个问题： setAttribute or ClassName 都完全覆盖了 tr 原有的classname 。好的做法

【HTML】

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>动态变化表格颜色</title>
 5     <meta charset="utf-8">
 6     <link rel="stylesheet" type="text/css" href="styles/changetablecolor.css" />
 7 </head>
 8 <body>
 9     <table>
10         <caption>Hellow</caption>
11         <tr >
12             <th>When</th>
13             <th>Where</th>
14         </tr>
15         <tr class="test"> //已经存在class
16             <td>aaa</td>
17             <td>vs</td>
18         </tr>
19         <tr>
20             <td>bbb</td>
21             <td>vsafs</td>
22         </tr>
23         <tr>
24             <td>ccc</td>
25             <td>vsafs</td>
26         </tr>
27         <tr>
28             <td>ddd</td>
29             <td>vsafs</td>
30         </tr>
31     </table>
32     <script src="js/addLoadEvent.js"></script>
33     <script src="js/banmaxian.js"></script>
34 </body>
35 </html>

【CSS】

body{
    background-color: #fff;
}
table{
    margin: 0 auto;
    border: 1px solid #699;
}
caption{
    color: cornflowerblue;
    font-family: fantasy;
}
th{
    background-color: #ddd;
}
td{
    width: 100px;
}
/*伪类选择器
tr:hover {
    background-color: #66ffcc;
    font-weight: bold;
}*/
//原有样式
.test {
    background-color: green;
    font-weight: bold;
}
//新增样式
.selected-tr {
    background-color: red;
}

【JS】

 1 //加入Class
 2 function addClass(element,value) {
 3     if(!element.className) {
 4         element.className = value;
 5     }else {
 6         var oldclass = element.className;
 7         element.className = oldclass + " " + value;
 8         alert(element.className);
 9     }
10 }
11 //表格斑马线功能
12 function banmaxian() {
13     
14     //1. 得到table
15     var table = document.getElementsByTagName("table")[0];
16     //2. 遍历table中的行，可用flag 来隔行标识
17     var rows = table.getElementsByTagName("tr");
18     var flag = true;
19     for (var i = 1; i < rows.length; i++) {
20         if (flag) {
21             flag = false;
22             //3.设置 需要标识的行
23             //rows[i].setAttribute("class","selected-tr");
24             //rows[i].className = "selected-tr";
25             addClass(rows[i],"selected-tr");
26         }
27         else
28         {
29             flag = true;
30         }
31     }
32 }
33 addLoadEvent(banmaxian);

新的方法是：叠加到原来的className上边而不是覆盖

over！

posted on 2017-09-25 22:41 卜戈的博客阅读(113) 评论(0) 收藏举报

刷新页面返回顶部

风清扬

导航

公告

H5-JavaScript（六） CSS&Dom - DOM艺术2nd Chapter9