- 3
- 0
- 约8.45千字
- 约 12页
- 2017-03-18 发布于贵州
- 举报
javascript中top、clientTop、scrollTop、offsetTop的讲解?
?
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
以上主要指IE之中,FireFox差异如下:
IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
onMouseover当鼠标经过的时候,触发 = 后面的脚本函数
onMouseout 当鼠标离开 。。
onMouseUP 当鼠标 按下又抬起。。。
onmousemove 当鼠标移动。。
onmousedown 当鼠标按下时。。
假设 obj 为某个 HTML 控件。
obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置,整型,单位像素。
obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置,整型,单位像素。
obj.offsetWidth 指 obj 控件自身的绝对宽度,不包括因 overflow 而未显示的部分,也就是其实际占据的宽度,整型,单位像素。
obj.offsetHeight 指 obj 控件自身的绝对高度,不包括因 overflow 而未显示的部分,也就是其实际占据的高度,整型,单位像素。
我们对前面提到的 offsetParent 作个说明。
offsetParent 获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。offsetTop 与 offsetParent 很复杂,不同浏览器有不同解释,浮动一下解释又不同了,所以我们一般只要理解通过二者可以获得控件在浏览器中的绝对位置即可。
以上属性在 FireFox 中也有效。
另外:我们这里所说的是指 HTML 控件的属性值,并不是 document.body,document.body 的值在不同浏览器中有不同解释(实际上大多数环境是由于对 document.body 解释不同造成的,并不是由于对 offset 解释不同造成的)
我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素的位置,style.top 也是可以的,二者的区别是:
一、offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。
二、offsetTop 只读,而 style.top 可读写。
三、如果没有给 HTML 元素指定过 top 样式,则 style.top 返回的是空字符串。
offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。
clientHeight
大家对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看
您可能关注的文档
- ch04conductig marketing research and forecasting demand(市场营销,科特勒,英文版)ch04conductin.ppt
- ch1 法律基础知识ch 法律基础知识.ppt
- ch 29 calc ad umch 29 calc and um.ppt
- ch1-l1 网络概述-组交换-2012春ch1-l1 网络概述-分组交换-2012春.ppt
- ch3 交换机vlan技及配置(控制交换网络中的广播流量)ch3 交换机vlan技术及配置(控制交换网络中的广播流量).ppt
- ch02 人力资源规划-012讲课版ch02 人力资源规划-2012讲课版.ppt
- ce-火电厂烟气脱硫技术应用(之四)ce-火电厂烟气脱硫技术与应用(之四).ppt
- ch10 job, bach and service costingch10 job, batch and service costing.ppt
- ch5-l15 tcp-塞控制-连接管理(待完善)ch5-l15 tcp-拥塞控制-连接管理(待完善).ppt
- ch09 - 字符串和文io本io.ppt
- 2025年全国演出经纪人员资格认定考试试卷带答案(研优卷).docx
- 2025年全国演出经纪人员资格认定考试试卷完整版.docx
- 2025年全国演出经纪人员资格认定考试试题库及完整答案.docx
- 2025年全国演出经纪人员资格认定考试试卷完美版.docx
- 2025年全国演出经纪人员资格认定考试试卷含答案(实用).docx
- 2025年全国演出经纪人员资格认定考试试卷及答案(各地真题).docx
- 2025年下半年内江市部分事业单位公开考试招聘工作人员(240人)备考题库附答案.docx
- 2025年全国演出经纪人员资格认定考试试卷及答案1套.docx
- 2025年下半年四川成都市郫都区面向社会引进公共类事业单位人员2人备考题库最新.docx
- 2025年下半年内江市部分事业单位公开考试招聘工作人员(240人)备考题库附答案.docx
最近下载
- CAD软件:CATIA二次开发_CATIAVBA编程基础.docx VIP
- 2025 国家电投 新能源区域化管理实施方案.docx VIP
- 基于 CNN-BiLSTM 的中短期电力负荷预测.docx VIP
- 乘运合同纠纷案代理词吴一诉西安汽车客运有限公司客运合同纠纷案.docx VIP
- 机械设计软件:CATIA二次开发_(8).CATIAVBA高级编程技巧.docx VIP
- 佛教戒律论文开题报告.docx VIP
- 2025春人教版三年级下册英语Unit 2 Expressing yourself Part B Read and write 课件.pptx VIP
- CAD软件:CATIA二次开发_(6).CATIAVBA高级编程技巧.docx VIP
- 火电项目可行性报告.ppt VIP
- 机械设计软件:CATIA二次开发_(3).CATIAVBA编程入门.docx VIP
原创力文档

文档评论(0)