时间:2021-07-01 10:21:17 帮助过:6人阅读
第一组:offsetWidth,offsetHeight,offsetLeft,offsetTop,offsetParent
第二组:clientWidth,clientHeight,clientLeft,clientTop
第三组:scrollWidth,scrollHeight,scrollLeft,scrollTop
详细定义如下:
1.1 HTML元素的offsetWidth,offsetHeight以CSS像素返回它的屏幕尺寸,包含元素的边框和内边距,不包含外边距。
1.2 offsetLeft和offsetTop属性返回元素的X和Y坐标。通常,它们返回值即是文档坐标。但对于已定位元素的后代元素和一些其他元素(如表格单元),这些属性返回的坐标是相对于祖先元素的而非文档。
1.3 offsetParent属性指定offsetLeft,offsetTop相对的父元素。如果offsetParent为null,后两者的返回值则为文档坐标。因此一般来说,用offsetLeft和offsetTop来计算元素e的位置需要一个循环:
该方法计算的位置也不总是正确的,推荐使用内置的getBoundingClientRect()方法。
2.1 clientWidth和clientHeight类似于offsetWidth和offsetHeight属性,不同的是它们不包含边框大小,只包含内容和内边距。同时,如果浏览器在内边距和边框之间添加了滚动条,clientWidth和clientHeight的返回值也不包含滚动条。注意,对于类型,和这些内联元素,clientWidth和clientHeight总是返回0。
2.2 clientLeft和clientTop返回元素的内边距的外边缘和它的边框的外边缘之间的水平距离和垂直距离,通常这些值就等于左边和上边的边框宽度。但是如果元素有滚动条,并且浏览器将这些滚动条旋转在左侧或顶部,他们就还包含了滚动条的宽度。对于内联元素,它们总是为0。通常clientLeft和clientTop用处不大。
3.1 scrollWidth和scollHeight是元素的内容区域加上它的内边距再加上任何溢出内容的尺寸。当内容正好和内容区域匹配而没有溢出时,这些属性与clientWidth和clientHeight是相等的。但当溢出时,它们就包含溢出的内容,返回值比clientWidth和clientHeight要大。
3.2 scrollLeft和scrollTop指定元素的滚动条的位置。注意,scrollLeft和scrollTop是可写的,通过设置它们来让元素中的内容滚动(HTML元素并没有类似Window对象的scrollTo()方法)。
obj.offset[WidthHeightTopLeft] 取控件相对于父控的位置
event.offset[XY] 取鼠标相在触发事件的控件中的坐标
event.screen[XY] 鼠标相对于屏幕坐标
event.client[XY] 鼠标相对于网页坐标在在
obj.scroll[WidthHeightTopLeft] 获取对象滚动的大小
obj.client[WidthHeightTopLeft] 获取对象可见区域的大小
各浏览器都有这些属性,有些值可能不一样。
自己写代码,对比一下结果,就明白了。
人气教程排行
-
213次
1
vue2 设置router-view默认路径的实例
-
213次
2
Vue-路由导航菜单栏的高亮设置方法
-
213次
3
基于Axios 常用的请求方法别名(详解)
-
213次
4
JavaScript+canvas实现七色板效果实例
-
212次
5
实现vuex的初始化方法
-
212次
6
jQuery:当鼠标快速移动时无法触发mouseleave事件的问题解决
-
212次
7
Array.slice()与Array.splice()的返回值类型_基础知识
-
212次
8
微信小程序使用swiper组件实现层叠轮播图
-
212次
9
element-ui 限制日期选择的方法(datepicker)
-
212次
10
vue-baidu-map 进入页面自动定位的解决方案(推荐)
-
212次
11
JS实现元素上下左右移动效果
-
212次
12
node.js中的emitter.on方法使用说明
-
211次
13
在js中如何实现图片左右滑动
-
211次
14
layui button 按钮弹出提示窗口,确定才进行的方法
-
211次
15
深入理解Vue生命周期、手动挂载及挂载子组件
-
211次
16
JS 使用for循环遍历子节点查找元素
-
210次
17
bootstrap如何设置表单必填
-
210次
18
bootstrap4兼容哪些浏览器
-
210次
19
jQuery实现追加数组并去重功能
-
210次
20
jQuery实现的在线答题功能_jquery