|
HTML页面内的每个元素都可以通过JavaScript来访问DHTML的样式属性包含有可视性属性后者能够让你控制是否在页面上显示元素的内容要做到这一点你就要把属性设置为可视或者隐藏下面的句法能够让用户通过JavaScript来访问这个属性 documentelement_namestylevisibility = visible 或者 documentelement_namestylevisibility = hidden; 真正的元素通过使用其ID属性和JavaScript的getElementById方法就能够轻易被找到 documentgetElementById(element name)stylevisibility = hidden; 要记住HTML元素都被分配了ID属性用来在页面里区分它们这就允许DHTML和JavaScript能够定位并使用各个独立的元素下面的HTML示例将不同的名称分配给了HTML标题（header）的元素并使用JavaScript来显示和隐藏第二个标题 <html> <head> <title>div test</title> </head> <body> <h id=header onMouseOver=documentgetElementById(header)stylevisibility=hidden; onMouseOut=documentgetElementById(header)stylevisibility = visible;> Now you see it! </h> <h id=header> Now you dont! </h> </body> </html> 这段代码使用了第一个标题元素的onMouseOver和onMouseOut事件用来显示和隐藏第二个标题元素要注意通过ID属性分配给第二个标题的名称是用来控制其在JavaScript里可视程度的 在一次只需要显示文档的一部分的时候显示和隐藏元素的方法是好处颇多的它可以用于菜单扩展／压缩页面的区域以及其他等等你可以对任何HTML的元素使用这个技巧但是在处理页面大块区域的时候DIV元素将是它的一个主要竞争对手 什么是DIV？ DIV元素是用来为HTML文档内大块（blocklevel）的内容提供结构和背景的元素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() { documentgetElementById(section)stylevisibility=hidden; documentgetElementById(section)stylevisibility=hidden; documentgetElementById(section)stylevisibility=hidden; documentgetElementById(section)stylevisibility=hidden; } </script></head> <body onLoad=setAllVisible();> <h> Sample</h> <ul> <li><a # onClick= documentgetElementById(section)stylevisibility=visible; documentgetElementById(section)stylevisibility=hidden; documentgetElementById(section)stylevisibility=hidden; documentgetElementById(section)stylevisibility=hidden;>Section </a></li> <li><a # onClick= documentgetElementById(section)stylevisibility=hidden; documentgetElementById(section)stylevisibility=visible; documentgetElementById(section)stylevisibility=hidden; documentgetElementById(section)stylevisibility=hidden;>Section </a></li> <li><a # onClick= documentgetElementById(section)stylevisibility=hidden; documentgetElementById(section)stylevisibility=hidden; documentgetElementById(section)stylevisibility=visible; documentgetElementById(section)stylevisibility=hidden;>Section </a></li> <li><a # onClick= documentgetElementById(section)stylevisibility=hidden; documentgetElementById(section)stylevisibility=hidden; documentgetElementById(section)stylevisibility=hidden; documentgetElementById(section)stylevisibility=visible;>Section </a></li> </ul><br> <div id=section>Section text</div> <div id=section>Section text</div> <div id=section>Section text</div> <div id=section>Section text</body> </html> 这段代码包括了一个用来隐藏所有DIV元素的JavaScript函数当文档被加载的时候这个函数就被调用了点击每个超链接将会显示相关的区域并隐藏其他的区域这种方式的一个弱点是只有Internet Explorer 或者更高版本的浏览器以及Netscape Navigator 或者更高版本的浏览器才支持这些方法但是我使用Mozilla 测试过没有问题 只在必要的时候才显示信息 将DHTML和JavaScript的强大能力组合起来使用就能够让你预加载页面的内容并在适当的时候显示其各个部分这样就可以提高响应时间因此能够为用户提供更高的性能 |
