super_x

innerHTML函数

使用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。

posted on 2008-11-12 17:09  super_x  阅读(552)  评论(0编辑  收藏  举报