<<  WEB设计经验－来自microsoft.com设计主管 | 首 页 | 定义页面链接的默认值  >>

  • [原]JScript中innerHTML的例子

    2005-12-16

    版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
    http://forest.blogbus.com/logs/1710100.html

    使用JScript的innerHTML属性，可以获取或设置位于指定的 HTML 服务器控件的开始标记和结束标记之间的内容。这个属性现在在页面设计中很流行，因为它可以让静态的页面也能实现动态的效果。

    如你可以让静态的页面也实现像ASP页面中的将顶部和底部分别存成一个文件再用include包含到页面中，实现模版的功能。下面看看如何实现：

    先做好顶部和底部，如下：
    -----------------------------顶部 top.html-------------------------------
     <table width="100%" height="100" border="0" cellpadding="0" cellspacing="0" bgcolor="blue">
       <tr>
         <td>这是顶部</td>
       </tr>
     </table>
    -----------------------------------------------------------------

    -----------------------------底部 bottom.html-------------------------------
     <table width="100%" height="22" border="0" cellpadding="0" cellspacing="0" bgcolor="red">
       <tr>
         <td>这是底部</td>
       </tr>
     </table>
    -----------------------------------------------------------------

    然后将这两部分的代码分别用下面的格式存成JS文件：
    -----------------------------顶部 top.js-------------------------------
    var str;
    str='<table width="100%" height="22" border="0" cellpadding="0" cellspacing="0" bgcolor="blue">';
      str=str+'<tr>';
        str=str+'<td>这是顶部</td>';
      str=str+'</tr>';
    str=str+'</table>';
    top.innerHTML=str;
    -----------------------------------------------------------------

    -----------------------------底部 bottom.js-------------------------------
    var str;
    str='<table width="100%" height="22" border="0" cellpadding="0" cellspacing="0" bgcolor="red">';
      str=str+'<tr>';
        str=str+'<td>这是底部</td>';
      str=str+'</tr>';
    str=str+'</table>';
    bottom.innerHTML=str;
    -----------------------------------------------------------------

    下面我们看看要调用这两个部分的文件：

    ---------------------------------try.html--------------------------------
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>JScript中innerHTML的例子</title>
    </head>
    <body>
    <!-- 顶部开始 -->
    <div id="top"></div>
    <!-- 顶部结束 -->
    <!-- 主要内容开始 -->
    页面主要内容
    <!-- 主要内容结束 -->
    <!-- 底部开始 -->
    <div id="bottom"></div>
    <!-- 底部结束 -->
    <script language="javascript" src="top.js"></script>
    <script language="javascript" src="bottom.js"></script>
    </body>
    </html>
    -----------------------------------------------------------------

    这样当你打开try.html的时候，就可看到顶部和底部都已经自动加进来了。

    需要注意的是，在JS文件中的innerHTML前面的id名与要调用的页面中的id名要一至。例子中的top和bottom。


    随机文章：


    收藏到：Del.icio.us




    Tag：JScript 文章分享 原创
    引用地址：
    Ghost 发表于11:33 | 编辑 | 继续话题 | 转发 | 推荐

    评论

  • 兄弟,这篇好,顶,

    我已经当到我的blog上了,呵....
    修泽 | 发表于2005-12-16 21:16:32 [回复]