区别client、offset、scroll系列以及event的几个距离属性

原创 2015年07月28日 20:42:22

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>

//js
document.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 获取元素位置尺寸

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

HTML5触摸事件(touchstart、touchmove和touchend)

HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主...

JS手机触摸屏的事件用法详解

现在智能手机火爆了,我们都是触摸屏事的,那么我们以前js写法是无法满足一些要求了,下面我来给大家介绍几个JS手机触摸屏的事件用法 处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑...

图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别

通过 2 张图和 1 张表格,轻松区别 Javascript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性。 不同浏览器对这些属...
  • lzding
  • lzding
  • 2015-05-02 09:42
  • 11438

touchstart,touchmove,touchend触摸事件的小小实践心得

近段时间使用html5开发一个公司内部应用,而触摸事件必然是移动应用中所必须的,刚开始以为移动设备上或许也会支持鼠标事件,原来是不支持的,好在webkit内核的移动浏览器支持touch事件,并且打包成...

移动互联网终端的touch事件,touchstart, touchend, touchmove

前言 如果我们允许用户在页面上用类似桌面浏览器鼠标手势的方式来控制WEB APP,这个页面上肯定是有很多可点击区域的,如果用户触摸到了那些可点击区域怎么办呢?? 诸如智能手机和平板电脑一类的移...

offset、scroll、client三大家族

1、offset    偏移 1、offsetWidth 和 offsetHeight 是用来得到对象的大小,由自身宽高 内边距 边框构成但是不包括 外边距 offsetHeight和sty...

03-JS特效-三大系列之scroll系列

三大系列 offset-位移 scroll-卷页(本文) client-可视区 onscroll 滚动事件(window.onscroll = fun…) 屏幕每滚动一...

js 三大家族(offset/scroll/client)

js 三大家族(offset/scroll/client) .box1 { width: 300px; height: 300...

JavaScript语言:offset家族成员详解

JavaScript语言:offset家族成员详解,用法,疑点,难点,在我们编程之中,offset……

offsetLeft与style.left的区别 event.altKey、event.ctrlKey、event.shiftKey 属性 clientWidth和offsetWidth

offsetLeft与style.left的区别 offsetLeft 获取的是相对于父对象的左边距 left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)