释放双眼，带上耳机，听听看~！
DHTML技术使用的基本思路：
- 用标签封装数据—html范畴
- 定义样式—css范畴
- 明确事件源、事件和要处理的节点—dom范畴
- 明确具体的操作方式，其实就是事件的处理内容(过程)—js范畴
新闻字体
第一种方式：html范畴 演示代码：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
2 <head>
3 <title>>DHTML技术演示---新闻字体1</title>
4 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
5 <script type="text/javascript">
6 function changeFont(size,color){
7 //alert("aa");
8 var oNewsDiv = document.getElementById("newsDiv");
9
10 //以下用js+dom来设置下面html方式对应的功能
11 //<div id="newsDiv" style="font-size:28px">
12 //oNewsDiv.style.font-size= "28px"; //左边的方式是html方式中的属性名，不是js中用的属性名
13 //oNewsDiv.style.fontSize="28px";//写死了，字体大小用参数更好
14 oNewsDiv.stye.fontSize=size;//字体大小
15 oNewsDiv.style.color=color;
16 }
17
18 </script>
19
20 </head>
21 <!--DHTML技术使用的基本思路：
22 1. 用标签封装数据---html范畴
23 2. 定义样式---css范畴
24 3. 明确事件源、事件和要处理的节点---dom范畴
25 4. 明确具体的操作方式，其实就是事件的处理内容(过程)---js范畴
26 -->
27 <body>
28 <!--用“#”号可以屏蔽href的默认超链接功能，但有个不足：地址栏中会添加一个"#"号----改用javascript的方式更好！---javascript:void(0)
29 <a href="#" onclick="changeFont()"> 大字体</a>
30 -->
31 <a href="javascript:void(0)" onclick="changeFont('28px','#aaaaaa')">大字体</a>
32 <a href="javascript:void(0)" onclick="changeFont('20px','#000000')">中字体</a>
33 <a href="javascript:void(0)" onclick="changeFont('12px','#ff0000')">小字体</a>
34 <hr/>
35 <!--开始这样先测试下：
36 先用html的方式测试一下这样设置字体大小行不行，如果行，再采用API文档右侧栏中的js来实现对应功能
37 <div id="newsDiv" style="font-size:28px">
38 -->
39 <div id="newsDiv">
40 5月31日下午14：30，副校长何振在电信楼视频会议室，为学生处、团委、计划财务处、信息科学与工程学院和体育学院全体师生党员上了一堂题为“讲政治，有信念，做合格党员”的党课。
41何振阐述了“讲政治，有信念”的重要性，并讲述了如何才能把握“讲政治，有信念”。他认为，党员应当从把握“讲政治，有信念”的深刻内涵、核心要义和方法路径这三个方面入手。他指出，践行“讲政治，有信念”，必须将其与高校管理、教学、科研相结合，运用到实践当中去，“办人民满意的大学”，并结合学校具体情况进行了深入的分析。<br/>
42（信息科学与工程学院）
43 </div>
44 </body>
45</html>
46
47
360浏览器8.1 演示结果：
大字体：
中字体：
小字体：
第二种方式：css范畴 演示代码：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
2 <head>
3 <title>>DHTML技术演示---新闻字体1</title>
4 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
5 <style type="text/css">
6 .max{
7 color:#808080;
8 font-size:28px;
9 background-color:#9ce9b4;/*背景色*/
10 }
11 .norm{
12 color:#000000;
13 font-size:20px;
14 background-color:#cdd8d0;
15 }
16 .min{
17 color:#ff0000;
18 font-size:16px;
19 background-color:#f9fac2;
20 }
21 </style>
22 <script type="text/javascript">
23 function changeFont(sClass){
24 var oNewsDiv = document.getElementById("newsDiv") ;
25 //利用js+dom的方式来更改节点的样式---class属性
26 oNewsDiv.className = sClass;
27 }
28 </script>
29
30 </head>
31 <!--DHTML技术使用的基本思路：
32 1. 用标签封装数据---html范畴
33 2. 定义样式---css范畴
34 3. 明确事件源、事件和要处理的节点---dom范畴
35 4. 明确具体的操作方式，其实就是事件的处理内容(过程)---js范畴
36 -->
37 <body>
38 <a href="javascript:void(0)" onclick="changeFont('max')" > 大字体 </a>
39 <a href="javascript:void(0)" onclick="changeFont('norm')" > 中字体 </a>
40 <a href="javascript:void(0)" onclick="changeFont('min')" > 小字体 </a>
41
42 <!--先用html的方式测试一下，然后再用js+dom
43 <div id="newsDiv" class="norm">
44 -->
45 <div id="newsDiv">
46 5月31日下午14：30，副校长何振在电信楼视频会议室，为学生处、团委、计划财务处、信息科学与工程学院和体育学院全体师生党员上了一堂题为“讲政治，有信念，做合格党员”的党课。
47何振阐述了“讲政治，有信念”的重要性，并讲述了如何才能把握“讲政治，有信念”。他认为，党员应当从把握“讲政治，有信念”的深刻内涵、核心要义和方法路径这三个方面入手。他指出，践行“讲政治，有信念”，必须将其与高校管理、教学、科研相结合，运用到实践当中去，“办人民满意的大学”，并结合学校具体情况进行了深入的分析。<br/>
48（信息科学与工程学院）
49 </div>
50 </body>
51</html>
52
53
360浏览器8.1 演示结果：
大字体：
中字体：
小字体：
第三种方式：dom，js范畴 演示代码：
1.css：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2 color: #808080;
3 font-size: 28px;
4 background-color: #9ce9b4;
5}
6
7.norm {
8 color: #000000;
9 font-size: 20px;
10 /*background-color:#cdd8d0;*/
11}
12
13.min {
14 color: #ff0000;
15 font-size: 16px;
16 background-color: #f9fac2;
17}
18
19
2.css:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2 color: #808080;
3 font-size: 28px;
4 background-image:url(img/back1.jpg);
5}
6
7.norm {
8 color: #000000;
9 font-size: 20px;
10 background-image: url(img/back2.jpg);
11}
12
13.min {
14 color: #ff0000;
15 font-size: 16px;
16 background-image: url(img/back3.jpg);
17}
18
html：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
2 <head>
3 <title>DHTML技术演示---新闻字体3--换套装</title>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <link rel="stylesheet" type="text/css" href="1.css" id="linkChgSuit">
6
7 <style type="text/css">
8 span:hover{
9 background-color:#ff0000;
10 cursor:hand;/*鼠标移到那时，显示小手形状*/
11 }
12 </style>
13 <script type="text/javascript">
14 //更改类样式
15 function changeFont(sClass){
16 var oNewsDiv = document.getElementById("newsDiv");
17 //利用js+dom的方式来更改节点的样式---class属性
18 oNewsDiv.className = sClass;
19 }
20 //换套装
21 function changeSuit(sNum){
22 var oLink = document.getElementById("linkChgSuit");
23 oLink.href = sNum+".css";
24 }
25
26
27 </script>
28
29 </head>
30 <!--DHTML技术使用的基本思路：
31 1. 用标签封装数据---html范畴
32 2. 定义样式---css范畴
33 3. 明确事件源、事件和要处理的节点---dom范畴
34 4. 明确具体的操作方式，其实就是事件的处理内容(过程)---js范畴
35 -->
36
37 <body>
38 <a href="javascript:void(0)" onClick="changeFont('max')"> 大字体</a>
39 <a href="javascript:void(0)" onClick="changeFont('norm')"> 中字体</a>
40 <a href="javascript:void(0)" onClick="changeFont('min')"> 小字体</a>
41 <br/>
42 <span onClick="changeSuit('1')">风格1</span>
43 <span onClick="changeSuit('2')">风格2</span>
44 <hr/>
45 <!--先用html的方式测试一下，然后再用js+dom
46 <div id="newsDiv" class="norm">
47 -->
48 <div id="newsDiv">
49 5月31日下午14：30，副校长何振在电信楼视频会议室，为学生处、团委、计划财务处、信息科学与工程学院和体育学院全体师生党员上了一堂题为“讲政治，有信念，做合格党员”的党课。
50何振阐述了“讲政治，有信念”的重要性，并讲述了如何才能把握“讲政治，有信念”。他认为，党员应当从把握“讲政治，有信念”的深刻内涵、核心要义和方法路径这三个方面入手。他指出，践行“讲政治，有信念”，必须将其与高校管理、教学、科研相结合，运用到实践当中去，“办人民满意的大学”，并结合学校具体情况进行了深入的分析。<br/>
51（信息科学与工程学院）
52 </div>
53
54 </body>
55
56</html>
57
58
360浏览器8.1 演示结果：
风格2大字体：
风格2中字体：
风格1大字体：
风格1中字体：
菜单列表：
代码演示：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
2 <head>
3 <title>DHTML技术演示---菜单列表1</title>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <style type="text/css">
6 /*老版本的IE支持，新版本不支持了
7 dl{
8 height:18px;
9 overflow:hidden;
10 }*/
11
12 /*
13block : CSS1 块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行
14none : CSS1 隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间
15 ul{
16 //display:none;//不显示
17 display:block;//块显示
18 }
19 */
20 table {
21 border:#ff80ff;
22 width:80px;
23 }
24
25 table ul{
26 list-style:none;
27 margin:0px;/*外补丁*/
28 padding:0px;/*内补丁*/
29 background-color:#ff8000;
30 display:none;
31 }
32 table td{
33 border:#0000ff 1px solid;
34 background:#80ff00;
35 }
36
37 table td a:link, table td a:visited{
38 color:#8080c0;
39 text-decoration:none;
40 }
41 table td a:hover{
42 color:#0000ff;;
43 }
44
45 .open{
46 display:block;
47 }
48 .close{
49 display:none;
50 }
51
52
53 </style>
54
55 <script type="text/javascript">
56 function list(node){
57 var oTdNode = node.parentNode;
58 //alert( oTdNode.nodeName);//TD
59 var oUlNode = oTdNode.getElementsByTagName("ul")[0];
60 //alert( oUlNode.nodeName);//UL
61 if( oUlNode.className =="open"){
62 oUlNode.className ="close";
63 }else{
64 oUlNode.className ="open";
65 }
66 }
67
68 </script>
69 </head>
70 <!--DHTML技术使用的基本思路：
71 1. 用标签封装数据---html范畴
72 2. 定义样式---css范畴
73 3. 明确事件源、事件和要处理的节点---dom范畴
74 4. 明确具体的操作方式，其实就是事件的处理内容(过程)---js范畴
75 -->
76
77 <body>
78 <table>
79 <tr>
80 <td>
81 <a href="javascript:void(0)" onclick="list(this)">文件菜单</a>
82 <ul>
83 <li>菜单项一</li>
84 <li>菜单项二</li>
85 <li>菜单项三</li>
86 <li>菜单项四</li>
87 </ul>
88 </td>
89 </tr>
90 <tr>
91 <td>
92 <a href="javascript:void(0)" onclick="list(this)">编辑菜单</a>
93 <ul>
94 <li>菜单项一</li>
95 <li>菜单项二</li>
96 <li>菜单项三</li>
97 <li>菜单项四</li>
98 </ul>
99 </td>
100 </tr>
101 <tr>
102 <td>
103 <a href="javascript:void(0)" onclick="list(this)">调试菜单</a>
104 <ul>
105 <li>菜单项一</li>
106 <li>菜单项二</li>
107 <li>菜单项三</li>
108 <li>菜单项四</li>
109 </ul>
110 </td>
111 </tr>
112 </table>
113
114 </body>
115
116</html>
117
118
360 8.1 演示结果;
下面就是只能点开一个菜单（点一个菜单时，把其他菜单全部关闭）：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
2 <head>
3 <title>DHTML技术演示---菜单列表2</title>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <style type="text/css">
6 /*老版本的IE支持，新版本不支持了
7 dl{
8 height:18px;
9 overflow:hidden;
10 }*/
11 /*
12 ul{
13 //display:none;//不显示
14 display:block;//块显示
15 }
16 */
17 table {
18 border: #ff80ff;
19 width: 80px;
20 }
21
22 table ul {
23 list-style: none;
24 margin: 0px;
25 padding: 0px;
26 background-color: #ff8000;
27 display: none;
28 }
29
30 table td {
31 border: #0000ff 1px solid;
32 background: #80ff00;
33 }
34
35 table td a:link, table td a:visited {
36 color: #8080c0;
37 text-decoration: none;
38 }
39
40 table td a:hover {
41 color: #0000ff;;
42 }
43
44 .open {
45 display: block;
46 }
47
48 .close {
49 display: none;
50 }
51 </style>
52 <script type="text/javascript">
53 function list(node){
54 var oTdNode = node.parentNode;
55 //alert( oTdNode.nodeName);//TD
56 var oUlNode = oTdNode.getElementsByTagName("ul")[0];
57 //alert( oUlNode.nodeName);//UL
58
59 var oNode = document.getElementsByName("men");
60 for (x = 0; x < oNode.length; x++) {
61 var ulNode = oNode[x].parentNode.getElementsByTagName("ul")[0];
62 if (oNode[x].innerText == node.innerText) {
63 if (ulNode.className == "open") {
64 ulNode.className = "close";
65 }
66 else {
67 ulNode.className = "open";
68 }
69 }
70 else
71 if (ulNode.className == "open") {
72 ulNode.className = "close";
73 }
74 }
75
76 }
77 </script>
78 </head>
79 <!--DHTML技术使用的基本思路：
80 1. 用标签封装数据---html范畴
81 2. 定义样式---css范畴
82 3. 明确事件源、事件和要处理的节点---dom范畴
83 4. 明确具体的操作方式，其实就是事件的处理内容(过程)---js范畴
84 -->
85 <body>
86 <table>
87 <tr>
88 <td>
89 <a href="javascript:void(0)" onclick="list(this)" name="men">文件菜单</a>
90 <ul>
91 <li>
92 菜单项一
93 </li>
94 <li>
95 菜单项二
96 </li>
97 <li>
98 菜单项三
99 </li>
100 <li>
101 菜单项四
102 </li>
103 </ul>
104 </td>
105 </tr>
106 <tr>
107 <td>
108 <a href="javascript:void(0)" onclick="list(this)" name="men">编辑菜单</a>
109 <ul>
110 <li>
111 菜单项一
112 </li>
113 <li>
114 菜单项二
115 </li>
116 <li>
117 菜单项三
118 </li>
119 <li>
120 菜单项四
121 </li>
122 </ul>
123 </td>
124 </tr>
125 <tr>
126 <td>
127 <a href="javascript:void(0)" onclick="list(this)" name="men">调试菜单</a>
128 <ul>
129 <li>
130 菜单项一
131 </li>
132 <li>
133 菜单项二
134 </li>
135 <li>
136 菜单项三
137 </li>
138 <li>
139 菜单项四
140 </li>
141 </ul>
142 </td>
143 </tr>
144 </table>
145 </body>
146</html>
147
148
演示结果：
