HTML元素和事件对象中的各种宽高和位置

HTML元素和事件对象中的各种宽高和位置

标签： js

[TOC]

---

经常被一堆的xxxWidth,xxxLeft弄混，统一整理一下。

1. HTML元素中的宽高和位置属性

• clientWidth 表示元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条、边框和外边距。

• clientHeight 表示元素内部的高度(单位像素)，包含内边距和元素内容，但不包括水平滚动条、边框和外边距。

• clientLeft 表示一个元素的左边框的宽度，以像素表示。如果元素的文本方向是从右向左（RTL, right-to-left），并且由于内容溢出导致左边出现了一个垂直滚动条，则该属性包括滚动条的宽度。clientLeft 不包括左外边距和左内边距。clientLeft 是只读的。

• clientTop 一个元素顶部边框的宽度（以像素表示）。不包括顶部外边距或内边距。clientTop 是只读的。

• offsetWidth 表示元素实际占用的宽度，包括其边框，内边距和元素内容。

• offsetHeight 表示元素实际占用的高度，包括其边框，内边距和元素内容。

• offsetLeft 表示元素相对于其offsetParent。 属性指定的父元素左上角的水平偏移量，从元素的边框开始计算。body元素的offsetParent为null。

• offsetTop 表示元素相对于其offsetParent 属性指定的父元素左上角的垂直偏移量，从元素的边框开始计算。

• scrollWidth 表示元素的内容区域宽度，包括overflow样式属性导致的视图中不可见内容。若元素的宽度大于其内容的区域（例如，元素存在滚动条时）, scrollWidth的值要大于clientWidth。scrollWidth是只读的。

• scrollHeight 表示元素内容高度，包括overflow样式属性导致的视图中不可见内容。没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的内边距，但不包括元素的边框和外边距。scrollHeight是只读的。

• scrollTop 此属性可以设置或者获取一个元素的显示区域距离他容器顶部的像素距离。

• scrollLeft 此属性可以读取或设置元素显示区域距离其容器最左边的像素距离。

2. getBoundingRect()方法

返回一个对象，包括元素实际占用位置(从边框开始计算)与浏览器内容窗口左上角的位移量，从元素的边框开始计算

• left 元素的最左侧与浏览器内容窗口左上角的位移量

• right 元素的最右侧与浏览器内容窗口左上角的位移量

• top 元素的最上侧与浏览器内容窗口左上角的位移量

• bottm 元素的最下侧与浏览器内容窗口左上角的位移量

3.事件对象

• clientX 设置或获取鼠标指针位置相对于浏览器窗口区域的x坐标，浏览器窗口区域指浏览器显示的窗口，不包括菜单栏，工具栏等区域。

• clientY 设置或获取鼠标指针位置相对于浏览器窗口区域的y坐标

• pageX 设置或获取鼠标指针位置相对于整个浏览器的x坐标。IE无此属性

• pageY 设置或获取鼠标指针位置相对于整个浏览器的y坐标。IE无此属性

• screenX 设置或获取鼠标指针位置相对于整个屏幕的x坐标

• screenY 设置或获取鼠标指针位置相对于整个屏幕的y坐标

• offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 从元素的内边距开始计算

• offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。从元素的内边距开始计算。

• layerX 在firefox和safari下，表示鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的实际占用区域(包含边框)的左上角为参考点。在chrome与opera中，以触发事件元素的中心作为坐标系原点。IE不支持此属性

• layerY 表示鼠标点击位置在坐标系中的y值

• x chrome,safari,opera浏览器中与clientX相等，IE中与offsetX相等，firefox无此属性

• y chrome,safari,opera浏览器中与clientY相等，IE中与offsetY相等，firefox无此属性