DHTML技术使用的基本思路：

1. 用标签封装数据—html范畴

2. 定义样式—css范畴

3. 明确事件源、事件和要处理的节点—dom范畴

4. 明确具体的操作方式，其实就是事件的处理内容(过程)—js范畴

新闻字体

第一种方式：html范畴 演示代码：

  1. <html>
  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");
  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.         }
  18.     </script>
  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>

360浏览器8.1 演示结果：

大字体：



中字体：



小字体：

第二种方式：css范畴 演示代码：

  1. <html>
  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>
  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>
  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>

360浏览器8.1 演示结果：

大字体：



中字体：



小字体：

第三种方式：dom，js范畴 演示代码：

1.css：

  1. .max {
  2.     color: #808080;
  3.     font-size: 28px;
  4.     background-color: #9ce9b4;
  5. }
  7. .norm {
  8.     color: #000000;
  9.     font-size: 20px;
  10.     /*background-color:#cdd8d0;*/
  11. }
  13. .min {
  14.     color: #ff0000;
  15.     font-size: 16px;
  16.     background-color: #f9fac2;
  17. }

2.css:

  1. .max {
  2.     color: #808080;
  3.     font-size: 28px;
  4.     background-image:url(img/back1.jpg);
  5. }
  7. .norm {
  8.     color: #000000;
  9.     font-size: 20px;
  10.     background-image: url(img/back2.jpg);
  11. }
  13. .min {
  14.     color: #ff0000;
  15.     font-size: 16px;
  16.     background-image: url(img/back3.jpg);
  17. }

html：

  1. <html>
  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">
  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.         }
  26.      </script>
  28.   </head>
  29.   <!--DHTML技术使用的基本思路：
  30.    1. 用标签封装数据---html范畴
  31.    2. 定义样式---css范畴
  32.    3. 明确事件源、事件和要处理的节点---dom范畴
  33.    4. 明确具体的操作方式，其实就是事件的处理内容(过程)---js范畴
  34.   -->
  36.   <body>
  37.     <a href="javascript:void(0)" onClick="changeFont('max')"> 大字体</a>
  38.     <a href="javascript:void(0)" onClick="changeFont('norm')">  中字体</a>
  39.     <a href="javascript:void(0)" onClick="changeFont('min')"> 小字体</a>
  40.     <br/>
  41.     <span onClick="changeSuit('1')">风格1</span>
  42.     <span onClick="changeSuit('2')">风格2</span>
  43.     <hr/>
  44.     <!--先用html的方式测试一下，然后再用js+dom
  45.       <div id="newsDiv" class="norm">
  46.     -->
  47.     <div id="newsDiv">
  48.        5月31日下午14：30，副校长何振在电信楼视频会议室，为学生处、团委、计划财务处、信息科学与工程学院和体育学院全体师生党员上了一堂题为“讲政治，有信念，做合格党员”的党课。
  49. 何振阐述了“讲政治，有信念”的重要性，并讲述了如何才能把握“讲政治，有信念”。他认为，党员应当从把握“讲政治，有信念”的深刻内涵、核心要义和方法路径这三个方面入手。他指出，践行“讲政治，有信念”，必须将其与高校管理、教学、科研相结合，运用到实践当中去，“办人民满意的大学”，并结合学校具体情况进行了深入的分析。<br/>
  50. （信息科学与工程学院）
  51.     </div>
  53.   </body>
  55. </html>

360浏览器8.1 演示结果：

风格2大字体：



风格2中字体：



风格1大字体：



风格1中字体：

菜单列表：

代码演示：

  1. <html>
  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.         }*/
  12.         /*
  13. block  :　 CSS1  块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行
  14. none  :　 CSS1  隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间
  15.         ul{
  16.             //display:none;//不显示
  17.             display:block;//块显示
  18.         }
  19.         */
  20.         table {
  21.             border:#ff80ff;
  22.             width:80px;
  23.         }
  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.         }
  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.         }
  45.         .open{
  46.             display:block;
  47.         }
  48.         .close{
  49.             display:none;
  50.         }
  52.      </style>
  54.      <script type="text/javascript">
  55.         function list(node){
  56.             var oTdNode = node.parentNode;
  57.             //alert( oTdNode.nodeName);//TD
  58.             var oUlNode = oTdNode.getElementsByTagName("ul")[0];
  59.             //alert( oUlNode.nodeName);//UL
  60.             if( oUlNode.className =="open"){
  61.                 oUlNode.className ="close";
  62.             }else{
  63.                 oUlNode.className ="open";
  64.             }
  65.         }
  67.      </script>
  68.   </head>
  69.   <!--DHTML技术使用的基本思路：
  70.    1. 用标签封装数据---html范畴
  71.    2. 定义样式---css范畴
  72.    3. 明确事件源、事件和要处理的节点---dom范畴
  73.    4. 明确具体的操作方式，其实就是事件的处理内容(过程)---js范畴
  74.   -->
  76.   <body>
  77.     <table>
  78.         <tr>
  79.             <td>
  80.                 <a href="javascript:void(0)" onclick="list(this)">文件菜单</a>
  81.                 <ul>
  82.                     <li>菜单项一</li>
  83.                     <li>菜单项二</li>
  84.                     <li>菜单项三</li>
  85.                     <li>菜单项四</li>
  86.                 </ul>
  87.             </td>
  88.         </tr>
  89.         <tr>
  90.             <td>
  91.                 <a href="javascript:void(0)" onclick="list(this)">编辑菜单</a>
  92.                 <ul>
  93.                     <li>菜单项一</li>
  94.                     <li>菜单项二</li>
  95.                     <li>菜单项三</li>
  96.                     <li>菜单项四</li>
  97.                 </ul>
  98.             </td>
  99.         </tr>
  100.         <tr>
  101.             <td>
  102.                 <a href="javascript:void(0)" onclick="list(this)">调试菜单</a>
  103.                 <ul>
  104.                     <li>菜单项一</li>
  105.                     <li>菜单项二</li>
  106.                     <li>菜单项三</li>
  107.                     <li>菜单项四</li>
  108.                 </ul>
  109.             </td>
  110.         </tr>
  111.     </table>
  113.   </body>
  115. </html>

360 8.1 演示结果;

下面就是只能点开一个菜单（点一个菜单时，把其他菜单全部关闭）：

  1. <html>
  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.             }
  22.             table ul {
  23.                 list-style: none;
  24.                 margin: 0px;
  25.                 padding: 0px;
  26.                 background-color: #ff8000;
  27.                 display: none;
  28.             }
  30.             table td {
  31.                 border: #0000ff 1px solid;
  32.                 background: #80ff00;
  33.             }
  35.             table td a:link, table td a:visited {
  36.                 color: #8080c0;
  37.                 text-decoration: none;
  38.             }
  40.             table td a:hover {
  41.                 color: #0000ff;;
  42.             }
  44.             .open {
  45.                 display: block;
  46.             }
  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
  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.                 }
  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>

演示结果：

JavaScript---网络编程(8)-DHTML技术演示(1)的更多相关文章

  1. JavaScript---网络编程(12)--DHTML技术演示(5)-form表单验证技术(正则)

    这里不进行很复杂的后台验证以及JavaScript的正则表达式,只是简单的介绍下这个技术,简单的后台接收与跳转,大概了解怎么验证的就可以.具体的技术,我后面还会继续写博客的.本人也还在学习中. 表单验 ...

  2. JavaScript---网络编程(11)--DHTML技术演示(4)-单选框/下拉菜单/添加文件

    本节讲述单选框/下拉菜单/添加文件,综合css,html和JavaScript. 单选框: 实现的功能是:(类似平时的性格测试) 先隐藏一部分页面,然后通过点击单选框来显示. 再通过选项的选择-(每个 ...

  3. JavaScript---网络编程(10)--DHTML技术演示(3)-多选框

    这节讲述多选框的使用,当然,肯定是结合css和Javascript一起的. checkbox的使用1: 演示代码: <html> <head> <meta http-eq ...

  4. JavaScript---网络编程(9-2)--DHTML技术演示(2-2)-表格加强

    对上篇博客的最后那个表格隔行高亮显示加了个功能,鼠标监听和年龄从小到大排序. 演示代码: <html> <head> <title>DHTML技术演示---表格中页 ...

  5. JavaScript---网络编程(9-1)--DHTML技术演示(2-1)-表格创建的几种方式

    一:用最底层的方式,该方式用来创建别的对象树也可以 代码演示: <html> <head> <title>DHTML技术演示---表格创建--用最底层的方式,其实该 ...

  6. Linux网络编程-IO复用技术

    IO复用是Linux中的IO模型之一,IO复用就是进程预先告诉内核需要监视的IO条件,使得内核一旦发现进程指定的一个或多个IO条件就绪,就通过进程进程处理,从而不会在单个IO上阻塞了.Linux中,提 ...

  7. Socket网络编程TCP、UDP演示样例

    Socket网络编程: 1) OSI(了解): 国际标准化组织ISO(International Orgnization for Standardization)指定了网络通信的模型:开放系统互联(O ...

  8. 读书笔记——网络编程与开发技术（3）基于TCP/IP协议的网络编程相关知识

    TCP/IP协议:数据链路层,网络层,传输层,应用层. IP地址分为5类:A类.B类.C类.D类.E类. (A类.B类.C类是基本类,D类多用于多播传送,E类为保留类.) "*"表 ...

  9. java socket网络编程（多线程技术）

    Client.java import java.io.*; import java.net.*; import java.util.*; public class Client { public st ...

随机推荐

  1. Effective C++ 学习总结

    摒弃C的做法采用C++的实现方式 以const和inline代替define 以iostream流代替stdio 以new和delete代替 C++风格注释 内存管理 new和delete, new[ ...

  2. OpenJudge 2775 文件结构“图”/ Poj 1057 FILE MAPPING

    1.链接地址: http://bailian.openjudge.cn/practice/2775 http://poj.org/problem?id=1057 2.题目: 总时间限制: 1000ms ...

  3. 7种基本排序算法的Java实现

    7种基本排序算法的Java实现 转自我的Github 以下为7种基本排序算法的Java实现,以及复杂度和稳定性的相关信息. 以下为代码片段,完整的代码见Sort.java 插入排序 /** * 直接插 ...

  4. 简单Linq笔记

    Linq是.net 3.5才引入的 要引入命名空间System.Linq. Linq  to XML要引入System.Xml.Linq Linq to ADO.NET要引入System.Data.L ...

  5. 【转】ORACLE日期时间 等函数大全

    转自:ORACLE日期时间函数大全 ORACLE日期时间函数大全 TO_DATE格式(以时间:2007-11-02   13:45:25为例)           Year:              ...

  6. 浅谈JavaScript词法分析步骤

    JavaScript代码运行前有一个类似编译的过程即词法分析,词法分析主要有三个步骤: 分析参数 再分析变量的声明 分析函数声明 具体步骤如下: 函数在运行的瞬间,生成一个活动对象(Active Ob ...

  7. wpf RadioButton控件的一个bug，onpropertychanged后会修改旧属性的值

    测试代码下载:http://files.cnblogs.com/djangochina/RadioButtonBug.zip 从上面列表选择不同的行,再设置下面不同的radiobutton看看结果 b ...

  8. 关于js小数计算的问题

    在js浮点运算中 var a=0.2-0.1; var b=0.3-0.2; console.log(a==b); 答案是什么呢,很多人可能认为是true,包括我在内,但是当我写出来运行了一下,我被答 ...

  9. isEqual

    "; NSString *str2 = [NSString stringWithFormat:@"%@", str1]; 大家明白, str1和str2在内存中的地址是不 ...

  10. HIVE编程指南之HiveQL的学习笔记1

    // HiveQLa) 数据定义语言1 数据库表的一个目录或命名空间,如果用户没有指定数据库的话,那么将会使用默认的数据库default-----创建数据库CREATE DATABASE guoyon ...