区别client、offset、scroll系列以及event的几个距离属性
来源:互联网 发布:macbook重复安装软件 编辑:程序博客网 时间:2024/04/28 22:32
element元素结点属性
一. offset系列
1.offsetWidth 和offsetHeight
element.offsetWidth是一个只读属性,它包括了:
css width + padding+border+垂直滚动条宽度
这里的滚动条就是单纯滚动条的意思,不包括不可见的部分哦。
而element.offsetHeight与之类似,只是改为垂直方向而已。
在页面布局中要计算和考虑的盒子的宽度和高度通常用这个属性。
2.offsetParent
element.offsetParent是一个只读属性,返回一个对象的引用,这个引用指向了element(调用offsetParent)的最近一个使用了定位(absolute、relative)的父元素,如果没有定位了的父元素,则指向根元素(标准模式下为 html;quirks 模式下为 body)。
兼容性:
在 Webkit 中,如果元素为隐藏的(该元素或其祖先元素的 style.display 为 “none”),或者该元素的 style.position 被设为 “fixed”,则该属性返回 null。
在 IE 9 中,如果该元素的 style.position 被设置为 “fixed”,则该属性返回 null。(display:none 无影响。)
3.offsetTop和offsetLeft
element.offsetTop 和 element.offsetLeft 都是相对于offsetParent的内边距(外)边界的。
也就是返回对象元素边界的左上角顶点相对于offsetParent的左上角顶点的水平偏移量。这里,元素对象左上角顶点是要从border开始算(如果有的话,即border边界距离offsetParent padding边界的距离,不是从从元素的margin开始算),offsetParent的左上角是指其padding边界。
在元素定位中通常使用这个属性来获取定位元素的top和left样式值。
参考资料:
前端攻城狮学习笔记九:让你彻底弄清offset
HTMLElement.offsetParent
二. client系列
1.clientHeight和clientWidth
element.clientHeight表示元素可视区域的高度,包括可视区域中元素的
CSS height+padding
不包括边框、滚动条、不可见部分、margin。
clientWidth类似,只不过是水平方向。
例如document.documentElement.clientWidth是整个文档的可视区宽度。
2.clientLeft和clientTop
是元素
padding外边界与父元素的padding边界的距离-元素的offsetLeft值,就等于元素的左边框宽度。???不知道理解对没
clientTop与之类似。
三. scroll系列
1.scrollHeight和scrollWidth
element.scrollHeight属性是只读的,它包括:
可见CSS高度+padding+border+由于overflow设置为隐藏或者scroll而不可见的内容高度。
可看出和offsetHeight的区别就是多了个不可见内容区高度。scrollWidth与之类似。
2.scrollTop和scrollLeft
即是被scroll了的内容区域的高度和宽度,隐藏不可见的内容区域。
注意:
元素设置了overflow: scroll,滚动条是占据了元素原来CSS宽度的一部分,即加了滚动条后,元素CSS中定义的属性width=滚动条宽度+content 宽度。边框是加在滚动条外面的,而padding则是加在滚动条内部,内容区之外的。
一个盒子设置了margin-top,是和别的盒子间的垂直距离,这个别的盒子不包括父盒子,也就是说,内部盒子顶部和父盒子边界的距离不变,而是整个父盒子顶部都和更外部的环境相距了margin-top值的距离。
参考资料:
Mozilla文档上的图示描述得很明白
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollHeight
event事件对象属性
下面几个是event事件对象的属性,可获取鼠标的位置:
1.clientX,clientY
表示鼠标位置距离可视窗口边缘的距离。它们是事件对象的属性。这2个属性不是标准属性,但得到了广泛支持。IE事件中没有这2个属性。
2. pageX,pageY
表示鼠标位置距离整个文档页面边缘(左和上边缘)的距离
3.screenX,screenY
表示鼠标位置距离屏幕边缘的距离
4.offsetX,offsetY:
鼠标相对于事件源元素(srcElement)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性。
来看个小例子,跟随鼠标的提示框:
//css#info {position:absolute;}//html<div id="info"></div>//jsdocument.onmousemove=function(ev){ var oEvent=ev||event; var info=document.getElementById('info'); //获取不可见内容高度 var scrollTop=document.documentElement.scrollTop|| document.body.scrollTop//???混杂模式和标准模式下都能工作? info.style.left=oEvent.clientX+'px'; info.style.top=oEvent.clientY+scrollTop+'px'; //可视区高度+scrolled的高度}
document.documentElement指向document对象的根元素,在html文档中就是html元素。
经验:只要在用到clientX和clientY的地方都最好加上scroll值。
参考:
JS & jQuery 获取元素位置尺寸
- 区别client、offset、scroll系列以及event的几个距离属性
- offset系列、client系列、scroll系列的属性
- client offset scroll的区别
- scroll、offset和client的区别
- js的element中,属性以scroll、client和offset为前缀的属性的区别
- JS对象:offset、scroll、event、client
- javascript的offset、client、scroll使用方法,相关属性解释原理
- offset,client,scroll的不同之处
- javascript的offset、client、scroll
- JS中常用坐标offset、scroll、client的区别(转载)
- JS中常用坐标offset、scroll、client的区别
- JS中常用坐标offset、scroll、client的区别
- offset,client,scroll,getStyle获取元素宽高的区别
- e.client/offset/page/scroll 数据的区别
- js的三大家族(offset/scroll/client)和一个事件对象(event)///正则
- JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动
- Offset,Client,Scroll,Height,Top 一些距离参数的图示和解释
- JavaScript 特效之四大家族(offset/scroll/client/event)
- [华为机试真题]68.简单四则运算
- jquery的一点点认识
- Day17.STL编程
- java I/O学习
- 默认实参需要注意的几个地方
- 区别client、offset、scroll系列以及event的几个距离属性
- 美乐家梁赢@济南美乐家团队:美乐家是未来趋势的领跑者
- rman恢复遭遇ora-1152
- opencv之haar特征+AdaBoos分类器算法流程(三)
- 基于ZedBoard的Webcam设计(二):USB摄像头图片采集+QT显示
- [系统配置] Ubuntu常用环境配置 jdk & maven & flash
- memcached学习笔记1(windows 7 64bit 环境下安装memcached)
- ext笔记(te be continued..)
- JVM学习之委托机制