第6章 JavaScript开发动态文档.ppt

第6章 JavaScript开发动态文档 6.1 简介 动态XHTML指利用一组技术集合动态地修改XHTML描述的文档，即通过用户交互或浏览器事件对文档的标签（元素）属性、内容和样式进行修改 一般可以使用DOM0对文档进行动态修改 6.2 元素定位 使用元素的left、top样式属性可以实现某个参考点到元素之间的左边和上边的距离 使用元素的position样式属性(取值可为absolute、relative、static)可以实现元素的绝对、相对、静态定位 6.2 元素定位——绝对定位 position:absolute，元素相对窗口边框/某个父容器（某个元素在另一个元素内部）进行定位（与它原来位置无关），可实现元素的叠加或产生水印效果 例：两个段落重叠，一个段落作为背景 style type=text/css .p1 { position : absolute ; left:100px; top : 100px ; width:300px; color:Blue; } .p2 { position : absolute ; left:100px; top:100px; font-size:50px; color:Gray; width:300px; } /style 6.2 元素定位——相对定位 position:relative，相对于原来位置进行定位，可指定left和top(可为负值) 例：多个按钮的相对位置 style type=text/css .pos4 { position:relative; left:10px; top:10px; } .pos5 { position:relative; left:20px; top:20px; } /style div input type=button value=1/ input type=button class=pos4 value=2 / input type=button class=pos5 value=3 / /div 6.2 元素定位——相对定位 position:relative，相对于原来位置进行定位，可指定left和top(可为负值) 例：多个按钮的相对位置 style type=text/css .lbl1 { font-size:60px; position:relative; top:15px; } /style /head body div p 介绍 label id=label1 class=lbl1计算机/label 的发展历史 /p /div 6.2 元素定位——静态定位 position:static，默认定位方式，不能移开或移动该元素 6.3 移动元素 当position设置为absulate、relative时，通过修改元素样式属性的top和left，对元素进行重新定位，实现元素的移动 例：实现元素的移动 6.3 移动元素 例：实现元素的移动 script type=text/javascript function move() { //当给元素指定style属性时 // var oldjpgx = document.getElementById(jpg1).style.left ; //当给元素指定文档样式或指定style属性时 var oldjpgx = document.getElementById(jpg1).offsetLeft ; var newjpgx = parseInt(oldjpgx)+20; document.getElementById(jpg1).style.left = newjpgx +px; } /script style type=text/css