JavaScript 中 offsetWidth，offsetHeight，clientWidth，clientHeight 等属性归纳

offsetWidth	返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）
offsetHeight	返回元素的高度（包括元素高度、内边距和边框，不包括外边距）
clientWidth	返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）
clientHeight	返回元素的高度（包括元素高度、内边距，不包括边框和外边距）
style.width	返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距）
style.height	返回元素的高度（包括元素高度，不包括内边距、边框和外边距）
scrollWidth	返回元素的宽度（包括元素宽度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientWidth相同
scrollHeigh	返回元素的高度（包括元素高度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientHeight相同
offsetTop	返回元素的上外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离。所谓的定位就是position属性值为relative、absolute或者fixed。返回值是一个整数，单位是像素。此属性是只读的。
offsetLeft	此属性和offsetTop的原理是一样的，只不过方位不同，这里就不多介绍了。
scrollLeft	此属性可以获取或者设置对象的最左边到对象在当前窗口显示的范围内的左边的距离，也就是元素被滚动条向左拉动的距离。返回值是一个整数，单位是像素。此属性是可读写的。
scrollTop	此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边的距离，也就是元素滚动条被向下拉动的距离。返回值是一个整数，单位是像素。此属性是可读写的。

当鼠标事件发生时（不管是onclick，还是omousemove，onmouseover等）

clientX	鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角x轴的坐标；不随滚动条滚动而改变；
clientY	鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角y轴的坐标；不随滚动条滚动而改变；
pageX	鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角x轴的坐标；随滚动条滚动而改变；
pageY	鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角y轴的坐标；随滚动条滚动而改变；
screenX	鼠标相对于显示器屏幕左上角x轴的坐标；
screenY	鼠标相对于显示器屏幕左上角y轴的坐标；
offsetX	鼠标相对于事件源左上角X轴的坐标
offsetY	鼠标相对于事件源左上角Y轴的坐标

JavaScript 中 offsetWidth，offsetHeight，clientWidth，clientHeight 等属性归纳相关推荐

javascript 中 offsetWidth 是什么意思？
javascript 中 offsetWidth 是什么意思? 最佳答案:是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变 scrollWidth,clientWidth与offsetWidt ...
如何在Javascript中访问对象的第一个属性？
本文翻译自:How to access the first property of an object in Javascript? Is there an elegant way to access ...
javascript中元素的scrollLeft和scrollTop属性说明
这两个属性的适用范围: 注意: 这两个属性只能用于元素设置了overflow的css样式中.否则这两个属性没有任何意义. 且overflow的值不能为visible,但可以为hidden,auto,s ...
php property 获取,JavaScript中如何获取和设置property属性代码详解
JavaScript中对象的property有三个属性: 1.writable.该property是否可写. 2.enumerable.当使用for/in语句时,该property是否会被枚举. 3. ...
JavaScript中的对象学习笔记（属性操作）
本文是笔者学习JavaScript时做的笔记,大部分内容来自<JavaScript权威指南>,记录学习中的重点,并引入一些其他博文和与其他程序员讨论的内容,供本人日常翻阅.如有疑问,请留言 ...
JavaScript中带有示例的Math.PI属性
JavaScript | Math.PI属性 (JavaScript | Math.PI Property) Math.PI is a property in math library of Java ...
javascript中的prototype原型、_proto_属性、原型链
prototype原型 JavaScript是面向对象的语言,那么继承自然是其重要特征之一.与标准面向对象语言不同,JavaScript继承主要通过prototype原型实现.每一个函数都具有prot ...
JavaScript 中 Object ，Prototype 相关的属性和方法
1.Objuect 类型 Object 类型是所有对象的基类型,可以用 new 运算符产生一个 Object 类型. 开发者可以通过产生 Object 类型的实例并向其动态添加属性和方法来产生自己需要 ...
JavaScript中节点获取，节点的属性，如何操作节点
任何 HTML 或 XML 文档都可以用 DOM 表示为一个由节点构成的层级结构. 一般来说在HTML中文档的节点分为三种: 1.元素节点通过querySelector获取的节点就是元素节点 ...

JavaScript 中 offsetWidth，offsetHeight，clientWidth，clientHeight 等属性归纳

当鼠标事件发生时（不管是onclick，还是omousemove，onmouseover等）

JavaScript 中 offsetWidth，offsetHeight，clientWidth，clientHeight 等属性归纳相关推荐

最新文章

热门文章