前面的文章我详细地介绍给大家了
offsetParent，这篇文章说明还没有结束。 先看看offsetWidth，offsetHeight
offsetWidth，offsetHeight 1.定义旧规则。 我们先来看看公式的定义。
HTMLElement.offsetWidth为3358www.Sina.com/，返回只读属性。 一个典型的offsetWidth是http://www.Sina.com/html element.offsetheight是元素的布局宽度，元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值
通常，元素offsetHeight是元素CSS高度的衡量标准，只读属性
对于文档的元素的像素高度对象，包含垂直内边距和边框。整数
元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包含：before或：after等伪类元素的高度，则为body
上面出现了比较重要的标志。 可以重点看到美丽的分割线
看完公式的定义我们自己捋捋看
什么是offsetWidth和offsetHeight
一般为3358 www.Sina.com/http://www.Sina.com /
3 .实例分析与offsetParent不同，offsetWidth，offsetHeight与定位无关，即使有定位，他们的值也不会改变
style .box { width: 300px； height: 400px； border : 1px固态# 234567； padding: 10px； 定位：固定； top: 30px； } .lit { position: absolute； 背景色：天空蓝； width: 200px； 高： 300 px； border : 1px固态# 000； top: 1000px； } .content { width: 300px； height: 400px； padding: 5px； 背景色： slate gray； border : 1px固态# 000； 玛格琳- left : 500px； }/styledivclass=' box ' divclass=' lit '/div/divdivclass=' content '/divscriptvarbox=document.query selector vor var content=document.query selector ('.content )； console.log (box offsetwidth---box.offsetwidth )； 控制台. log (box offsetheight---box.offsetheight )； console.log (lit offsetwidth---lit.offsetwidth )； 控制台. log (lit offsetheight---lit.offsetheight )； 二氧化碳
nsole.log("contentoffsetWidth----" + content.offsetWidth); console.log("contentoffsetHeight----" + content.offsetHeight); </script>让我们看一下打印结果
上面看了结果，下面我们看一下对照上面的公式如何计算出来的
boxoffsetWidth=content（300）+padding(10+10)+border(1+1)=322boxoffsetHeight= content（400）+padding(10+10)+border(1+1)=422litoffsetWidth=content（200）+padding(0)+border(1+1)=202
litoffsetHeight= content（300）+padding(0)+border(1+1)=302contentoffsetWidth=content（300）+padding(5+5)+border(1+1)=312
contentoffsetHeight= content（400）+padding(5+5)+border(1+1)=412 注意点 虽然这里打印的是字符串，但是要注意这里是隐式转换，这个值打印出来的是数字类型offsetWidth,offsetHeight是只读属性，不可以设置对于文档的body对象，它包括代替元素的CSS高度线性总含量高。
来看例子 //css部分 * { margin: 0; padding: 0; } .content { width: 300px; height: 400px; padding: 5px; background-color: slategray; border: 1px solid #000; }//html部分 <div class="content"> </div>//js部分 var content = document.querySelector(".content"); console.log(content.offsetWidth); content.style.offsetWidth = 500; console.log(content.offsetWidth); //由于宽度一般为屏幕宽度，所以这里不做打印，看一下明显一点的offsetHeight console.log(document.body.offsetHeight);
看结果
盒子没有变大，说明是只读属性
并且document.body.offsetHeight等于唯一一个盒子的offsetHeight
我们来看最后一块
1. 定义 官方定义 HTMLElement.offsetLeft 是一个只读属性，返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像素值。HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部内边距的距离 个人见解总结起来：我们要计算offsetLeft,offsetTop的值，我们需要看相对于父级（看最近的父级是否有定位，有定位，以最近的父级为标准，一级一级往上寻找，如果都没有，则以body为准）的内边距，上边距的距离
2.实例分析 //css * { margin: 0; padding: 0; } .big { /* position: relative; */ width: 300px; height: 300px; background-color: teal; border: 10px solid #000; margin: 40px; } .lit { width: 100px; height: 100px; background-color: #fff; margin-left: 20px; border: 7px solid #000; }//html<div class="big"> <div class="lit"></div> </div>//js var lit = document.querySelector(".lit"); //big没有定位 console.log(lit.offsetTop); //50 big的border(10)+big的margintop(40) console.log(lit.offsetLeft); //70 big的border(10)+big的marginleft(40)+自己的 margin-left（20px） //big有定位 console.log(lit.offsetTop); //0(与border无关) console.log(lit.offsetLeft); //20( margin-left(20px))上面放了详细的计算过程这里就不再叙述
3.注意 一级一级向上面查找，直到找到有定位的父级元素，没有找所有的爸爸body自己的boder不影响自己，但是父级的boder需要关怀 总结OffSet家族到这里差不多就结束了，希望大家能有所所获~