| |
技术文档>>JAVA>>新手入门>>基础入门>查看文档 |
|
| |
有选择地显示预加载内容提高网站的性能 |
|
| |
文章作者:未知 文章来源:水木森林 |
|
| |
查看:77次 录入:管理员--2007-11-17 |
|
| |
html页面内的每个元素都可以通过javascript来访问。dhtml的样式属性包含有可视性属性，后者能够让你控制是否在页面上显示元素的内容。要做到这一点，你就要把属性设置为可视或者隐藏。下面的句法能够让用户通过javascript来访问这个属性：
document.element_name.style.visibility = "visible"
或者
document.element_name.style.visibility = "hidden";
真正的元素通过使用其id属性和javascript的getelementbyid方法就能够轻易被找到：
document.getelementbyid("element name").style.visibility = "hidden";
要记住，html元素都被分配了id属性，用来在页面里区分它们。这就允许dhtml和javascript能够定位并使用各个独立的元素。下面的html示例将不同的名称分配给了html标题（header）的元素，并使用javascript来显示和隐藏第二个标题：
<html>
<head>
<title>div test</title>
</head>
<body>
<h1
id="header1"
onmouseover='document.getelementbyid("header2").style.visibility="hidden";'
onmouseout='document.getelementbyid("header2").style.visibility = "visible";'>
now you see it!
</h1>
<h2 id="header2">
now you don't!
</h2>
</body>
</html>
这段代码使用了第一个标题元素的onmouseover和onmouseout事件，用来显示和隐藏第二个标题元素。要注意，通过id属性分配给第二个标题的名称，是用来控制其在javascript里可视程度的。
在一次只需要显示文档的一部分的时候，显示和隐藏元素的方法是好处颇多的。它可以用于菜单、扩展／压缩页面的区域，以及其他等等。你可以对任何html的元素使用这个技巧，但是在处理页面大块区域的时候，div元素将是它的一个主要竞争对手。
什么是div？
div元素是用来为html文档内大块（block-level）的内容提供结构和背景的元素。div的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由div标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。internet explorer和netscape的浏览器都支持div标签。
div和span
很多开发人员都把div元素同span元素弄混淆了。尽管它们在特性上相同，但是span是用来定义内嵌内容而不是大块内容的。你可以对段落使用div标签，但是span对于为段落内的一个或者多个字赋予特殊的特性很有用。
div标签允许你分割一个web页面，以此来进行格式化和演示。可以将它和可视性的技巧组合起来使用，用以分割页面的内容，并显示你所选择的内容。下面这段示例代码使用了div标签将该页面分割成了多个区域；超链接会显示和隐藏这些区域：
<html><head>
<title>div test</title>
<script language="javascript">
function setallvisible() {
document.getelementbyid("section1").style.visibility="hidden";
document.getelementbyid("section2").style.visibility="hidden";
document.getelementbyid("section3").style.visibility="hidden";
document.getelementbyid("section4").style.visibility="hidden";
}
</script></head>
<body onload='setallvisible();'>
<h1>builder.com sample</h1>
<ul>
<li><a href="#"
onclick='
document.getelementbyid("section1").style.visibility="visible";
document.getelementbyid("section2").style.visibility="hidden";
document.getelementbyid("section3").style.visibility="hidden";
document.getelementbyid("section4").style.visibility="hidden";'>section 1</a></li>
<li><a href="#"
onclick='
document.getelementbyid("section1").style.visibility="hidden";
document.getelementbyid("section2").style.visibility="visible";
document.getelementbyid("section3").style.visibility="hidden";
document.getelementbyid("section4").style.visibility="hidden";'>section 2</a></li>
<li><a href="#"
onclick='
document.getelementbyid("section1").style.visibility="hidden";
document.getelementbyid("section2").style.visibility="hidden";
document.getelementbyid("section3").style.visibility="visible";
document.getelementbyid("section4").style.visibility="hidden";'>section 3</a></li>
<li><a href="#"
onclick='
document.getelementbyid("section1").style.visibility="hidden";
document.getelementbyid("section2").style.visibility="hidden";
document.getelementbyid("section3").style.visibility="hidden";
document.getelementbyid("section4").style.visibility="visible";'>section 4</a></li>
</ul><br>
<div id="section1">section 1 text.</div>
<div id="section2">section 2 text.</div>
<div id="section3">section 3 text.</div>
<div id="section4">section 4 text.</body>
</html>
这段代码包括了一个用来隐藏所有div元素的javascript函数。当文档被加载的时候，这个函数就被调用了。点击每个超链接将会显示相关的区域并隐藏其他的区域。这种方式的一个弱点是，只有internet explorer 5或者更高版本的浏览器以及netscape navigator 6或者更高版本的浏览器才支持这些方法。但是，我使用mozilla 1.01测试过，没有问题。
只在必要的时候才显示信息
将dhtml和javascript的强大能力组合起来使用，就能够让你预加载页面的内容，并在适当的时候显示其各个部分。这样就可以提高响应时间，因此能够为用户提供更高的性能。
|
|
|
|
相关文档
|
