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无此属性