js中offsetHeight，offsetWidth，offsetTop,offsetLeft属性的使用

页面偏移

属性	说明
element.offsetParent	返回元素的偏移容器
element.offsetHeight	返回元素的高度，包括边框和填充，但不是边距
element.offsetWidth	返回元素的宽度，包括边框和填充，但不是边距
element.offsetLeft	返回当前元素的相对水平偏移位置的偏移容器
element.offsetTop	返回当前元素的相对垂直偏移位置的偏移容器

1.element.offsetParent
element.offsetParent属性与定位有着很大的关系，它的定义是：与当前元素最近的经过定位的父级元素。主要有以下几种情况：

元素自身有fixed定位，那么offsetParent结果就是null
元素本身没有fixed定位，父级元素经过定位，那么offsetParent的结果为离自身元素最近的的经过定位的父级元素。
元素本身没有fixed定位，且父元素未经过定位，那么offsetParent的结果为
元素的offsetParent结果为是null

2.element.offsetHeight && element.offsetWidth
element.offsetHeight属性返回元素的垂直高度，element.offsetWidth属性返回元素的水平宽度。这两个属性包含了padding，border和滚动条。也就是说，如果不发生溢出，element.offsetHeight只比element.clientHeight多了边框的高度。

需要注意： 如果存在垂直滚动条，offsetWidth包括垂直滚动条的宽度；如果存在水平滚动条，offsetHeight包括水平滚动条的高度
3.element.offsetLeft && element.offsetTop
offsetTop表示元素的上外边框至offsetParent元素的上内边框之间的像素距离
offsetLeft表示元素的左外边框至offsetParent元素的左内边框之间的像素距离

下篇是关于滚动scrollTop等属性使用

js中offsetHeight，offsetWidth，offsetTop,offsetLeft属性的使用相关推荐

在js中如何使用jquery的属性选择器
个人理解: 可以更快捷的改变标签的属性第一步先创建好需要用的标签: <input type="checkbox" name="newsletter" v ...
JS中window对象的opener属性
JS中window对象的opener属性 JS中window对象的opener属性 window.opener是js中window的一个属性,它返回的是打开当前窗口的窗口对象.如果窗口A弹出一个窗口B ...
一文看懂js中元素偏移量（offsetLeft,offsetTop,offsetWidth,offsetHeight）
偏移量(offset dimension) 偏移量:包括元素在屏幕上占用的所有可见空间,元素的可见大小由其高度,宽度决定,包括所有内边距,滚动条和边框大小(注意,不包括外边距). 以下4个属性可以获取 ...
js中关于scrolltop.offsettop等距离用法的介绍
页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offse ...
JS中clientWidth offsetWidth innerWidth scrollWidth等区分
由于前端经常会遇到计算位置的问题,那么搞懂clientWidth,offsetWidth,scrollHeight等等这些就变得尤为重要.放上经典图,一张图让你搞懂clientWidth,offset ...
如何使用Vue.js中的set设置对象属性值
1.问题背景使用vue初始化一个对象v,并在data中初始化一个空对象obj,然后使用Vue.set()给对象obj添加属性 2.实现源码 <!DOCTYPE html> <htm ...
JS中的offsetWidth、offsetHeight、clientWidth、clientHeight等等的详细介绍
javascript中offsetWidth.clientWidth.width.scrollWidth.clientX.screenX.offsetX.pageX 原文:https://www.cn ...
JS获取元素的offsetTop,offsetLeft等相关属性
1. obj.clientWidth //获取元素的宽度 obj.clientHeight //元素的高度 obj.offsetLeft //元素相对于父元素的left obj.offsetTop / ...
JS中的offsetWidth, clientWidth, scrollWidth, innerWidth, outerWidth, pageXOffset
value description offsetWidth 返回元素的宽度(包括元素宽度.内边距和边框,不包括外边距) offsetHeight 返回元素的高度(包括元素高度.内边距和边框,不包括外边 ...

js中offsetHeight，offsetWidth，offsetTop,offsetLeft属性的使用

页面偏移

js中offsetHeight，offsetWidth，offsetTop,offsetLeft属性的使用相关推荐

最新文章

热门文章