DOM编程document对象.pptVIP

天津市电子计算机研究所 全方位IT服务及企业信息化解决方案供应商 天津市电子计算机研究所——研发中心实训基地 追求卓越，成就未来！ 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 …… 如果要把新闻贴图设为默认选中选项，该如何修改下面代码？ 在相应的option标签中设置selected属性 回顾 document对象有哪些常用方法？ bgcolor属性的作用？ 简要说明如何制作浮动的广告图片？ 制作带关闭按钮的浮动窗口 制作全选/全不选特效 本章任务 演示示例：带关闭按钮的浮动窗口 演示示例：全选/全不选特效 本章目标 会使用document对象的getElementById( )方法访问div层对象 会使用document对象的getElementsByName( )方法访问表单元素 会使用div对象的样式属性控制层的隐藏和显示 document对象 属性 方法 名称 说明 bgColor 设置或检索 Document 对象的背景色 名称 说明 getElementById( ) 根据HTML元素指定的ID，获得唯一的一个HTML元素。如：访问div层对象、图片img对象 getElementsByName( ) 根据HTML元素指定的name，获得相同名称的一组元素。如：访问表单元素(全选功能) JavaScript访问样式的应用 如何实现广告图片总是显示在页面上方，并且随滚动条同步移动？ 把广告图片放在一个div中，并且div总是显示在页面的上方 使用getElementById()方法获取层对象，并且获取层在页面上的初始位置 根据鼠标滚动事件，获取滚动条滚动的距离 随着滚动条的移动改变层在页面上的位置 获取样式属性值 获取行内样式的方法 var divObj=document.getElementById(test); var objTop=divObj.style.top; document.getElementById(elementId).样式属性值 获取类样式的方法 currentStyle getComputedStyle() var divObj=document.getElementById(test); var objTop= divObj.currentStyle.top; var objTop =document.defaultView.getComputedStyle(divObj,null).top; 制作随鼠标滚动的广告图片 使用currentStyle或getComputedStyle() 可以获得层在网页中的位置，但是如何获取滚动条滚动的距离呢？ 属性 描述 scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 clientWidth 浏览器中可见内容的高度，不包括滚动条等边线，会随窗口的显示大小改变 clientHeight 浏览器中可以看到内容的区域的高度 scrollTop、scrollLeft属性 获取滚动条在窗口中滚动的距离 document.documentElement.scrollTop; document.documentElement.scrollLeft; 制作随鼠标滚动的广告图片实现思路 图片放在一个层中，使用CSS样式设置层的初始位置 页面加载时，获取图片所在层的具体位置，即页面的left和top位置 获取页面初始位置时，要判断当前浏览器的类型，本例只判断是IE还是fireFox 当滚动条滚动时，获取滚动条距离页面顶端和左侧的距离，同时改变层距离顶端和左侧的位置 随鼠标滚动的广告图片 制作随鼠标滚动的广告图片 function move(){ adverObject.style.top=adverTop+parseInt(document.documentElement.scrollTop)+px; adverObject.style.l