对于offsetWidth,offsetHeight,offsetLeft,offsetTop的理解

如何理解区分offsetWidth,offsetHeight,offsetLeft,offsetTop

在刚开始使用的时候总是不能理解这四个有什么不一样，用在哪里，因为这几个词真的太像了，emmm，总结了一番，谈谈我的理解
这里首先说一下offsetWidth和offsetHeight
offsetWidth：指的是自身的宽
offsetheight：指的是自身的高
附上代码理解：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">#box{width: 100px;height: 100px;padding: 10px;border:10px solid #000;background: red;}
</style>
</head>
<body><div id="box"></div><script type="text/javascript">var oBox=document.querySelector('#box')console.log(oBox.offsetWidth,oBox.offsetHeight)</script>
</body>
</html>

打印的结果为140 140
加上margin结果仍为140 140
这里可以总结出两点：
1.offsetWidth和offsetHeight没有单位
2.offsetWidth=width+padding+border
offsetHeight=height+padding+border

然后来说一下对offsetLeft,offsetTop的理解
offsetLeft:DOM对象的左边距离定位父级（最近有定位属性的父级）的左边的距离
offsetTop：DOM对象的上边距离定位父级（最近有定位属性的父级）的上边的距离
附上代码理解：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">#box{width: 100px;height: 100px;padding: 10px;border:10px solid #000;background: red;}
</style>
</head>
<body><div id="box"></div><script type="text/javascript">var oBox=document.querySelector('#box')console.log(oBox.offsetLeft,oBox.offsetTop)</script>
</body>
</html>

打印的结果为8 8
emmm…为什么结果为8呢，我们来看下css样式
发现是body距离最外部有一个8px的距离，所以应该猜测一下应该是oBox距离最外部的左边和上边的距离

此时，在上面的html中加代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">#outer{position:relative}#box{width: 100px;height: 100px;padding: 10px;border:10px solid #000;margin-left:100px ;background: red;}
</style>
</head>
<body><div id="outer"><div id="box"></div></div><script type="text/javascript">var oBox=document.querySelector('#box')console.log(oBox.offsetLeft,oBox.offsetTop)</script>
</body>
</html>

震惊的是！！给父元素加上定位后offsetLeft和offsetTop居然变成了100，0，此时联系下刚才的结果，想到上面加定位的父元素是html，这个加定位的元素是outer，所以得出以下结论：
offsetLeft:DOM对象的左边距离定位父级（最近有定位属性的父级）的左边的距离
offsetTop：DOM对象的上边距离定位父级（最近有定位属性的父级）的上边的距离

对于offsetWidth,offsetHeight,offsetLeft,offsetTop的理解相关推荐

clientHeight offsetHeight scrollHeight offsetTop scrollTop
文章目录各属性详解实现 offsetParent.offsetLeft/offsetTop深度剖析 element.offsetParent 定义祖先元素中不存在定位元素 webkit内核.Fi ...
offsetWidth / offsetHeight等
1. offsetWidth / offsetHeight(不包括外边距) offsetWidth:返回元素的宽度(content+padding+border) offsetHeight:返回元素的 ...
ie6 offsetWidth/offsetHeight无效
ie6 offsetWidth/offsetHeight无效可采用手动获取: offsetWidth=parseInt(node.style.width)+parseInt(node.style.p ...
JS——offsetWidth与offsetLeft用法之无缝滚动
知识讲解: (1)offsetWidth是什么? 答:它可以获取物体宽度的数值:offsetWidth实际获取的是盒模型(width+border + padding)的宽度. 如图: (2)offs ...
理清offsetparent()、offsetLeft/offsetTop、offset()、position()
简而言之,它们的概念如下: ① offsetparent() 指的是元素的第一级拥有定位属性(absolute/relative/fixed)的父元素. ② offsetLeft/offsetTop ...
getBoundingClientRect offsetWidth offsetHeight
对于一个旋转的dom元素,getBoundingClientRect()得到的width,height是外接矩形的宽高, offsetWidth offsetHeight是未旋转前dom的宽高
一文看懂js中元素偏移量（offsetLeft,offsetTop,offsetWidth,offsetHeight）
偏移量(offset dimension) 偏移量:包括元素在屏幕上占用的所有可见空间,元素的可见大小由其高度,宽度决定,包括所有内边距,滚动条和边框大小(注意,不包括外边距). 以下4个属性可以获取 ...
offset家族/`offsetParent`-定位父级/真实宽高：offsetWidth，offsetHeight/offsetLeft和offsetTop
01-offset家族.真实宽高:offsetWidth,offsetHeight.-真实偏移:margin和定位的偏移组合:offsetLeft和offsetTop <style>.bo ...
看图理解scrollTop,scrollLeft,clientWidth,clientHeight,offsetWidth,offsetHeight
每次用JS获取页面的高宽时总都是相当的揪心,同一个属性在不同的浏览器或不同的W3C标准下所表示的意思都不尽相同.以下就针对页面的实际高宽和可见区域做个总结,以便大家查阅! 1. 在W3C标准的情况下 ...

对于offsetWidth,offsetHeight,offsetLeft,offsetTop的理解

如何理解区分offsetWidth,offsetHeight,offsetLeft,offsetTop

对于offsetWidth,offsetHeight,offsetLeft,offsetTop的理解相关推荐

最新文章

热门文章