JavaScript中的 offset, client,scroll

在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下。

offset

div.offsetTop 指div距离上方或上层控件的距离，单位像素

div.offsetLeft 指div距离左侧或上层控件的距离，单位像素

div.offsetWidth 指div 控件本身的宽度，单位像素

div.offsetHeight 指div 控件本身的高度，单位像素

混淆点

clientWidth 指对象看到的宽度，不包含border

scrollWidth 是对象实际的宽度，如果有padding 则就是左 padding和右padding之间的距离，如果没有padding，则就是边框之间的距离。

offsetWidth 是指对象的宽度，（包含border，滚动条占的宽度，值会随着内容的输入而改变）。

scrollHeight 是指获取对象的滚动高度。

scrollLeft 是指获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。

scrollTop 是指获取位于对象最顶端和窗口中目前可见内容的最顶端之间的距离。

scrollWidth 获取对象的滚动宽度。

clientX 是指设置或获取鼠标指针位置相对于当前窗口的x坐标，不包括窗口自身的控件和滚动条。

clientY 是指设置或获取鼠标指针位置相对于当前窗口的Y坐标，不包括窗口自身的控件和滚动条。

offsetX 是指设置或获取鼠标指针位置相对于触发事件的对象的x坐标。

offsetY 是指设置或获取鼠标指针位置相对于触发事件的对象的Y坐标。

时间： 2024-10-13 17:33:53

JavaScript中的 offset, client,scroll的相关文章

JS 中的 offset、scroll、client

---恢复内容开始--- offset的使用 css部分 *{ margin:0; padding: 0 } #offset{ width: 100px; height:100px; padding:20px; background: red; margin-top:30px; } #fixed{ position: absolute; right:100px; top:200px; width: 200px; height: 200px; background: black; } html部分

js中的dom节点以及offset,client,scroll家族

一.节点. 1.父节点:parentNode; 2.兄弟节点: (1).下一个兄弟节点:nextElementSibling(在Ie中用nextSibling); (2).上一个兄弟节点:previousElementSibling(在Ie中用 previousSibling); 3.子节点: (1).选中第一个子节点:firstElementChild(在Ie中用firstChild); (2).选中最后一个子节点:lastElementChild(在ie中用lastChild); (3).选

js中 offset /client /scroll总结

offsetLeft offsetTop offsetWidth offsetHeight offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(不包括元素的边框和父容器的边框). offsetTop:同理是指元素的边框的外边缘距离与已定位的父容器(offsetparent)的上边距离(不包括元素的边框和父容器的边框). offsetWidth:描述元素外尺寸宽度,是指元素内容宽度+内边距宽度(左右两个)+边框(左右两个),不包括外边距和滚动条部分.

js 元素offset,client , scroll 三大系列总结

1,element.offsetWidth : 包括 padding 和 边框 2,element.clientWidth : 包括 padding ,不包含边框 , 内容超出会溢出盒子的时候,就用scrollWidth 3,element.scrollWidth : 不包含边框 主要用法: 1,offset 系列 经常用于获得元素位置 offsetLeft  offsetTop 2,client经常用于获取元素大小, clientWidth , clientHeight 3,scroll经常用

offset client scroll pageXOffset属性，mouseover与mouseenter事件区别

offset 概述 使用 offset 系列属性可以动态得到该元素的位置(偏移),大小等 offset系列属性 说明(只读属性) ele.offsetTop 返回元素带有定位的父元素上方的偏移,父元素没有定位以body为准 ele.offsetLeft 返回元素带有定位的父元素左边的偏移,父元素没有定位以body为准 ele.offsetWidth 返回自身包括padding,边框,内容去的宽度 ele.offsetHeight 返回自身包括padding,边框,内容去的高度 ele.offse

javascript中常用坐标属性offset、scroll、client

原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. 1.在文档(document)对象里面用: scrollWidth/Height:获取对象的滚动宽度(滚动条可以滚动的宽度,相当于整个页面的总宽度的样子--网页正文全宽) scrollLeft/Top:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离(页面利用滚动条滚动到右边时,隐藏在

20190430-screen、client、offset、scroll等JS中各种宽度距离

参考文献: JavaScript概念之screen/client/offset/scroll/inner/avail的width/left 原文地址:https://www.cnblogs.com/nightnight/p/10795215.html

4.client、offset、scroll系列

client.offset.scroll系列 他们的作用主要与计算盒模型.盒子的偏移量和滚动有关 clientTop 内容区域到边框顶部的距离 ,说白了,就是边框的高度 clientLeft 内容区域到边框左部的距离,说白了就是边框的乱度 clientWidth 内容区域+左右padding 可视宽度 clientHeight 内容区域+ 上下padding 可视高度 client演示 <!DOCTYPE html> <html> <head> <meta cha

client 、 offset 、 scroll

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft: