摘要：元素和事件对象中的各种宽高和位置标签经常被一堆的弄混，统一整理一下。元素中的宽高和位置属性表示元素的内部宽度，以像素计。表示元素实际占用的高度，包括其边框，内边距和元素内容。
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无此属性
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/91037.html
摘要：摘自阮一峰教程位置大小属性只读属性返回浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距离单位像素。摘自阮一峰教程相关方法返回一个对象，提供当前元素的大小位置等信息。摘自阮一峰教程四鼠标事件接口通过添加的事件所产生的事件对象也是实例。 一 前言 在前端开发中总会遇到各种各样需要使用或计算坐标和距离的情况，但是这些属性和方法众多，全部熟练地记下来并非是一件易事，大多只能现查，耗费不少...
摘要：摘自阮一峰教程位置大小属性只读属性返回浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距离单位像素。摘自阮一峰教程相关方法返回一个对象，提供当前元素的大小位置等信息。摘自阮一峰教程四鼠标事件接口通过添加的事件所产生的事件对象也是实例。一 前言 在前端开发中总会遇到各种各样需要使用或计算坐标和距离的情况，但是这些属性和方法众多，全部熟练地记下来并非是一件易事，大多只能现查，耗费不少时间精力...
摘要：是一个只读的属性，元素的内容高度宽度，包括由于属性而不可见的部分。一个只读属性，返回一个指向最近的包含该元素的定位元素。很有用，因为和都是相对于其内边距边界的。它包括内部的宽度和高度和，但不包括滚动条和。 1.scrollHeight/Width scrollHeight/Width是一个只读的属性，元素的内容高度/宽度，包括由于overflow属性而不可见的部分。不能直接从css中得...
摘要：在中，存在着多的关于高度和宽度的属性，比如等等这么多，傻傻分不清也正常啊。第二问题对象的属性引用的是对象，表示该窗口中当前显示文档的。如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高。 在js中，存在着N多的关于高度和宽度的属性，比如：clientHeight、offsetHeight、scrollHeight、availHeight、scrollLef...
摘要：和这一对属性是用来读取元素的的宽度和高度的。第二部分对象在中，对于元素的运动的操作通常都会涉及到对象，而对象也存在很多位置属性，且由于浏览器兼容性问题会导致这些属性间相互混淆，这里一一讲解。文章转自中的各种宽高以及位置总结 在javascript中操作dom节点让其运动的时候，常常会涉及到各种宽高以及位置坐标等概念，如果不能很好地理解这些属性所代表的意义，就不能理解js的运动原理，同时...
阅读 2079·2021-09-23 11:52
阅读 1723·2021-09-02 15:41
阅读 2906·2019-08-30 10:47
阅读 1892·2019-08-29 17:14
阅读 2039·2019-08-29 16:16
阅读 3098·2019-08-28 18:29
阅读 3288·2019-08-26 13:30
阅读 2476·2019-08-26 10:49
