html中偏移量和坐标,页面元素坐标和偏移

鼠标事件

1. 客户区坐标位置(clientX/clientY)

通过event事件对象的clientX/clientY属性,获得事件发生时鼠标指针在视口的水平垂直坐标

2. 屏幕坐标位置(screenX/screenY)

通过event事件对象的clientX/clientY属性,获得事件发生时鼠标指针相对于整个屏幕的坐标信息

function showCoords(event){

var input1 = document.getElementsByTagName('input')[0];

var input2 = document.getElementsByTagName('input')[1];

var input3 = document.getElementsByTagName('input')[2];

var input4 = document.getElementsByTagName('input')[3];

input1.value = event.clientX;

input2.value = event.clientY;

input3.value = event.screenX;

input4.value = event.screenY;

}

3. 页面坐标位置 (pageX/pageY)

通过事件对象的pageX/pageY属性可以获得鼠标事件发生时鼠标光标相对于整个文档元素的坐标位置(包含滚动).在页面没有滚动的情况下，通常pageX/pageY的值与clientX/clientY的值相等

4. layerX/layerY

事件对象还有个不那么常见的属性，那就是layerX/layerY，他是对于绝对定位元素来说的，相对于当前点击元素的左上角定位的。当页面上的元素时相对定位(position:relative)的时候，通常pageX/pageY和layerX/layerY的值是相同的，但是当元素绝对定位(position:absolute)了的时候，layerX/layerY就将鼠标光标位置相对于本身的左上角定位了。

image.png

元素

5. 偏移量(offsetWidth/offsetHeight/offsetLeft/offsetTop)

元素的偏移量(offsetLeft/offsetTop)是相对于它的直接父元素来说的。

(元素的可见大小包括滚动条)

offsetWidth = width + padding + border

offsetHeight = height + padding + border

6. 客户区的大小(clientWidth/clientHeight)

元素内容及其内边距所占空间的大小(滚动条占用的空间不计算在内)

clientWidth = width + padding

clientHeight = width + padding

image.png

7. 滚动大小(scrollWidth/scrollHeight/scrollLeft/scrollTop)

scrollHeight/scrollWidth是整个内容区的实际宽高,即包括了隐藏部分

scrollLeft/scrollTop是出现了横/纵向滚动条的情况下，滚动条拉动的距离

有些元素，即使没有执行任何代码也会自动的添加滚动条，如,但是另外一些元素，则需要通过css的overflow属性进行设置才能滚动

带有垂直滚动条的页面总高度

document.documentElement.scrollHeight

image.png

window

8. window.scrollX/window.scrollY与window.pageXOffset/window.pageYOffset

window.scrollX/window.scrollY返回的是整个文档document在水平和竖直方向滚动了的距离

window.pageXOffset/window.pageYOffset相当于window.scrollX/window.scrollY的别名一样的

window.pageXOffset == window.scrollX; // 总是返回真

但在跨浏览器的情况下，尽量使用window.pageXOffset/window.pageYOffset比较好

为了保险起见，使用下面这样的代码来判断文档在垂直和水平防线滚动的距离比较好：

var x = (window.pageXOffset !== undefined) ? window.pageXOffset

: (document.documentElement || document.body.parentNode || document.body).scrollLeft;

var y = (window.pageYOffset !== undefined) ? window.pageYOffset

: (document.documentElement || document.body.parentNode || document.body).scrollTop;

关于获取滚动条高度的问题

有三种方式:

document.body.scrollTop

document.documentElement.scrollTop //在chrome有bug,需要进行判断

window.pageYOffset

9. window.innerHeight/window.innerWidth

window.innerHeight/window.innerWidth记录了视口内文档元素的实际高度和宽度，实际上还有window.outerHeight/window.outerWidth

image.png

如果页面中有frameset

var intFrameHeight = window.innerHeight; // or

var intFrameHeight = self.innerHeight;

// will return the height of the frame viewport within the frameset

var intFramesetHeight = parent.innerHeight;

// will return the height of the viewport of the closest frameset

var intOuterFramesetHeight = top.innerHeight;

// will return the height of the viewport of the outermost frameset

10. getBoundingClientRect()方法

getBoundingClientRect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。getBoundingClientRect是DOM元素到浏览器可视范围的距离(不包含文档卷起的部分)。该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height；这里的top、left和css中的理解很相似，width、height是元素自身的宽高，但是right，bottom和css中的理解有点不一样。right是指元素右边界距窗口最左边的距离，bottom是指元素下边界距窗口最上面的距离。

通过这个方法可以比较方便的获取页面元素的位置：

var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;

var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;