dom编程—document对象.ppt

DOM编程－document对象 第三章 回顾 window对象有哪些常用的方法及其含义？ 请说明Date对象主要用来做什么？ 请详细解释setTimeout( )方法的功能。 回顾 …… SELECT name=selTopic id=selPTopic OPTION value=gard.html网上谈兵/OPTION OPTION value=IT.htmlIT茶馆/OPTION OPTION value=news.html 新闻贴图/OPTION OPTION value=education.html教育大家谈/OPTION /SELECT …… 如果要把新闻贴图设为默认选中选项，该如何修改下面代码？ 预习检查 document对象有哪些常用方法？ bgcolor属性用来设置什么？ 简要说明如何制作浮动的广告图片。 本章任务 演示示例1：浮动的广告图片 演示示例2：带关闭按钮的浮动窗口 演示示例3：全选/全不选特效 制作浮动的广告图片特效 制作带关闭按钮的浮动窗口 制作全选/全不选特效 本章目标 会使用document对象的getElementById( )方法访问DIV层对象 会使用document对象的getElementsByName( )方法访问表单元素 会使用DIV对象的样式属性控制层的隐藏和显示 document对象 属性 方法 名称 说明 bgColor 设置或检索 Document 对象的背景色 名称 说明 getElementByID( ) 根据HTML元素指定的ID，获得唯一的一个HTML元素。如：访问DIV层对象、图片Img对象 getElementsByName( ) 根据HTML元素指定的name，获得相同名称的一组元素。如：访问表单元素(全选功能) 制作浮动的广告图片-1 如何在页面上方显示广告图片？如何控制图片的移动？ 使用DIV层，把图片放在层中，然后使用JavaScript控制层的位置坐标 制作浮动的广告图片-2 实现思路： 在页面中插入层，然后在层中插入图片 编写脚本 1、使用getElementByID( )方法获取层对象 2、捕获鼠标滚动事件，改变层对象的位置坐标 制作浮动的广告图片-3 常见的页面坐标的介绍 top:指定元素的上边界位置。 pixelTop:设置或返回元素的上边界。 left:指定元素的左边界位置。 scrolltop:页面滚动的高度 制作浮动的广告图片-4 SCRIPT language=javascript var advInitTop=0; function inix( ){ x=document.getElementById(advLayer).style.pixelTop; } function move( ){ document.getElementById(advLayer).style.pixelTop= advInitTop+document.body.scrollTop; } window.onscroll=move ; //当页面滚动时调用move( )函数 /SCRIPT …… BODY onload=inix( ) …… DIV id=advLayer style=position:absolute; left:16px; top:129px; width:144px; height:95px; z-index:1; A href=IMG src=images/advpic.gif width=180 height=230 border=0/A /DIV 查看完整代码 获取层的初始与上边界的距离 通过页面滚动的高度来改变层距离上边界的距离 制作带关闭按钮的浮动窗口-1 如何实现带关闭功能的浮动窗口？ 把带关闭的图标放到层中，当点击图标时层消失。 制作带关闭按钮的浮动窗口-2 实现思路： 在页面中插入层，在层中插入图片 编写脚本 1、使用getElementById( )方法获得层对象 2、设置层的样式style的显示属性display=none 制作带关闭按钮的浮动窗口-3 SCRIPT language=javascript var advInitTop=0; function inix( ){ advInitTop=document.getElementById(adv