js。为了不混淆它们，这里是其中一些的摘要，本文的测试环境如下：ChromeDev54.0.2840.71Firefox49.0Opera41.0Safari10.1IE11。前四个运行在macOSSierra10.12，IE11运行在装有windows101607的虚拟机上。有元素属性中各种“distance”元素属性中的6对距离：scrollLeft：设置或获取对象与窗口的左边界窗口中可见内容最左端的距离scrollTop：设置或获取最顶层对象与窗口最顶层可见内容的距离offsetHeight：获取对象可见区域的高度，包括边框offsetWidth：获取对象可见区域的可视区域宽度，包括边框clientHeight：获取对象边框内部分的高度clientWidth：获取对象边框内部分的宽度:获取对象的相对位置计算出的布局上的顶部位置或offsetTop属性指定的父坐标clientTop:获取对象上边框的宽度clientLeft:获取对象左边框的宽度scrollWidth:获取对象左边框的宽度对象的滚动宽度scrollHeight：获取对象的滚动高度。上面提到了offsetParent属性。其实当前div相对于谁定位就是这个属性是谁。根据位置值的不同，有以下两种情况。当父元素没有relative属性时，无论当前元素的位置是absolute、relative、fixed还是fixed，offsetParent都是body元素。当父元素有relative属性时，不管当前元素的位置是absolute、relative、fixed还是fixed，而offsetParent是最近的有relative属性的父元素？看下图，可以清楚的看到上面的前4对以及它们之间的关系。关于jQuery的元素距离属性，文章最后梳理了它们与DOM属性的关系。首先值得强调的是，上例中div的box-sizing属性是默认的content-box，它的offsetHeight、clientHeight、clientWidth和offsetWidth的关系如下：clientHeight=height+paddingTopWidth+paddingBottomWidth;clientWidth=width+paddingLeftWidth+paddingRightWidth;offsetHeight=clientHeight+borderTopWidth+borderBottomWidth;offsetWidth=clientWidth+borderLeftWidth+borderRightWidth;如果box-sizing属性是border-box，那么他们的关系会是这样（ie6ie7默认是这样）：第二个值得强调的是，在这个例子中，由于其父元素没有设置position:relative，所以图中的div使用了position:absolute;对于相对文档定位，如果给它添加一个带有position:relative属性的父div，那么offsetLeft和offsetTop会是这样的：但是不管怎么定位，即使是position:relative或者fixed，它的计算关系不会变，还是：offsetLeft=left+marginLeft;offsetTop=top+marginTop;说了这么多，那scrollWidth和scrollHeight呢？scrollWidth和scrollHeight在不同的浏览器中是不一致的，如下图（从左到右：Chrome,Firefox,Opera,Safari,IE11）其实仔细研究这个里面不同的浏览器，你会发现div的offsetLeft和offsetTop值的属性在不同的浏览器中并不完全相同。当div中的内容溢出时，只有IE保留所有的padding值，chrome、opera、safari会忽略padding。-right的值视为0，firefox会同时忽略padding-right和padding-bottom，如下图，滚动条本身的渲染在各个浏览器中是不一样的。它们在计算scrollWidth和scrollHeight时排除了各自的滚动条宽度。除了以上差异之外，实际发现各个浏览器中scrollLeft和scrollTop的最大值也不一样，甚至差距巨大。由于scroll事件发生时会输出scrollLeft和scrollTop，所以博主记下上面例子的最大值：maximumvaluechromeFirefoxoperasafariIE11scrollLeft330160827330217scrollTop230210485230330其实是由于这些元素属性在不同的浏览器不同，导致scrollWidth和scrollHeight不同，所以在具体使用时要特别注意。不过博主看了一些资料说这两个属性是和offsetParent有关的。通过实际编程，发现它们与offsetParent无关。这里就不描述了，因为低版本浏览器，尤其是ie7和ie6的实现可能会很奇怪。鼠标事件中有很多“距离”鼠标事件，但是每个事件中的distance属性的含义都是一样的。这里用mousemove来说明，具体内容稍后写在js事件部分。当前浏览器的鼠标实现是相同的。以下示例均在Chorme中实现。鼠标事件共有6对：event.clientX：相对于浏览器左上角的水平坐标event.clientY：相对于浏览器左上角的垂直坐标event.offsetX：相对于事件的左上角source(event.target||event.srcElement)角度水平偏移event.offsetY：相对于事件源(event.target||event.srcElement)左上角的垂直偏移event.pageX：相对于水平坐标文档左上角event.pageY：相对于文档左上角的垂直坐标event.layerX：相对于offsetParent左上角的水平偏移event.layerY：相对于左上角的水平偏移ofoffsetParentevent.movementX：相对于上一个事件中screenX的偏移量event.movementY：相对于上一个事件中screenY在event.screenX中的偏移量：相对于屏幕左上角的水平坐标event.screenY：相对于屏幕左上角的垂直坐标x：同pageX，为兼容IE8及之前浏览器y：同pageY，为兼容IE8及之前浏览器，先看图*在这个图片中，黑色实线边框表示浏览器可见区域，外面的蓝色虚线框表示整个DOM部分。整个画面就是电脑屏幕。为什么里面什么都没有？movementX和movementY？因为本次事件的值与上一次事件相关，所以关系如下：themouse到事件源的padding左上角的偏移量，这里在窗口注册了mousemove事件，所以位置如图。当浏览器水平滚动条滑动时，pageX和clientX是不同的。同样，当浏览器的垂直滚动条滑动时，pageY和clientY是不同的，但它们总是有如下关系：event.pageX=event.clientX+body.scrollLeft;event.pageY=event.clientY+body.scrollTop;鼠标事件中的距离比元素中的简单，具体使用放在后面写的事件部分。jQuery中的元素距离属性var$div=$("#div");$div.width();//元素宽度，不包括填充和边框$div.height();//元素高度，不包括padding和border$div.innerWidth();//内部元素宽度，包括padding，不包括border$div.innerHeight();//元素内部高度，包括padding，不包括border$div.outterWidth();//元素可见宽度，包括padding和border$div.outterHeight();//元素可见高度，包括padding和border$div.outterWidth(true);//元素全宽，包括padding、border和margin$div.outterHeight(true);//元素的全高，包括padding、border和margin
