-
1。通过样式内联获取元素的大小。
复制代码代码如下所示：
VaR箱= document.getelementbyid（'box '）； / /元素；
box.style.width； / / 200px；
box.style.height； / / 200px；
样式：只有在CSS样式属性的宽度和高度中，样式才可以使用，如果有，如果不返回空访问；
2。通过计算获得元素的大小
复制代码代码如下所示：
VaR的风格= window.getcomputedstyle window.getcomputedstyle（箱、空）：空| | box.currentstyle；
style.width； / / 200px；
通过计算元素的大小，不是内联或内联链接，它在计算结果之后返回；
如果自己设置了大小，它将返回元素本身的大小；如果没有设置，IE将返回默认大小，IE将返回自动；
三.元素的大小是由CSS规则（或规则）得到在css中定义的那样对象属性。
复制代码代码如下所示：
无功表=文档样式表{ 0 }； / /获得链接或风格；
var =规则（sheet.cssrules sheet.rules { 0 } | |）； / /得到的第一条规则；
rule.style.width； / / 200px；
PS：CSS规则只能得到宽度和高度内联和链接的样式，而不可得的风格在线条、后计算。
总结：通过CSS获得元素大小的上述三种方法只能获得元素的CSS大小，但不能获得元素本身的实际大小，例如，添加内边缘/滚动条/边框等。
两个元素的实际大小
1.clientwidth和自己
这组属性可以获得元素的可视区域的大小，包括元素内容和内部边界所占据的空间大小。
box.clientwidth / / 200；
ps：返回元素的大小，但没有单位，默认单位是PX；
PS：对元件的实际尺寸，clientwidth和自己的理解如下：
1。元素增加边界，没有变化，200；
2。元素增加外边界，没有变化，200；
三.增加滚动条，最后的值=原来的大小-滚动条的大小；184；
4。增加内边距，最终值=原始大小+内边距大小；220；
如果ps没有设置任何CSS宽度和高度，则非IE将计算滚动条和内边界后计算的大小；IE返回0；
2.scrollwidth和scrollheight
这组属性可以在没有滚动条的情况下获得元素内容的总高度。
Box.scrollWidth；
返回元素大小，默认单位是PX；如果没有设置任何CSS的宽度和高度，它将计算宽度和高度；
3.offsetwidth和offsetheight
这组属性可以返回元素的实际尺寸，包括边境 /内边距和滚动条。
box.offsetwidth；200
ps：返回元素的大小，默认单位是PX；如果没有设置任何CSS的宽度和高度，它将得到计算的宽度和高度。
ps：理解元素的实际大小如下：
1。添加边框，最后的值=原来的大小+边框大小；220；
2。增加内边距，最终值=原始大小+内边距大小；220；
三.增加外部基础，不改变；
4。增加轧制带，不改变，不会减少。
通过ps获取元素大小一般是块级（块）元素，设置CSS元素更方便。
三获取元素的大小
1.clientleft和clienttop
这组属性可以访问元素左边框和边框大小；
box.clientleft； / /得到左边框的宽度；
2.offsetleft和offsettop（偏移）
这组属性可以获得与父元素相对应的当前元素边界边界位置；
box.offsetleft / / 50；
与当前最佳位置相对应的父元素的元素，将其设置为位置：绝对值；
它的位置ps：不添加边框和填充，而是根据累计添加边缘；
box.offsetparent； / /得到父元素；
/ / PS：offsetparent，如果父元素本身是非IE，回到身体的对象，即对象返回的HTML；
/ /如果两个嵌套的元素，如果父元素不使用定位位置：绝对的，然后offsetparent将返回一个身体或HTML对象；
/ /如果说很多层，外层已经定位，从网页上的位置获得一个任意元素，不能阻止厌倦Calais实现回；
箱。offsettop + box.offsetparent.offsettop； / /只有两层；
如果必须使用多个单词，循环或递归；
功能offsetleft（元）{
VaR左= element.offsetleft； / /得到第一层的距离；
VaR母= element.offsetparent； / /先母元；
而（父母）！=）判断是否有父元素的一层；
左= parent.offsetleft； / /累计距离；
母= parent.offsetparent； / /父元素也回来了；
然后循环；
返回左边；获取最后的距离；
}
3.scrollTop and scrollLeft
这个属性可以通过一个组滚动隐藏区域的大小来获得，也可以设置为定位该区域；
box.scrolltop； / /得到滚动位置上面的内容；
将滚动条设置为滚动到初始位置；
功能scrollstart（元）{
如果（element.scrolltop！= 0）{
element.scrolltop = 0；
}
}
四getboundingclientrect（）方法
这个方法返回一个包含四个属性的矩形对象：左/右/右/下；
每一面和代表元素的页面顶部和左边的距离；
VaR箱= document.getelementbyid（'box）；
警报（盒。getboundingclientrect）（前）； / /距离以上的网页元素以上的距离；
警报（盒。getboundingclientrect）（右）； / /正确的距离对页面元素的左侧；
警报（盒。getboundingclientrect）（。底部）； / /距距离下面的页面元素；
警报（盒。getboundingclientrect）（左）； / /左距离对页面元素的左侧；
；
/ /但在伊江，默认的坐标（2,2）计算得到的距离的两个像素比其他浏览器；
document.documentelement.clienttop；IE 0、IE 2；
document.documentelement.clientleft；IE 0、IE 2；
/ / getboundingclientrect（兼容）
功能getrect（元）{
VaR矩形= element.getboundingclientrect（）；
var = document.documentelement.clienttop；
左= document.documentelement.clientleft VaR；
返回{
上图：rect.top-top，对页面元素/距离上缘（0-0和2-2）；
底部：rect.bottom-top，
左：rect.left-left，左页面元素/左边缘（0-0和2-2）；
右：rect.right-left
}
}；
五总结
1。偏移（偏移尺寸）：包括屏幕上元素所占据的所有可见空间；
该元素的可见的大小是由它的高度和宽度的确定，包括内部融资/滚动条和框架。
2。客户端区域大小（客户端维度）：元素内容及其内部边界占用的空间大小；
三.滚动尺寸（滚动尺寸）：包含滚动内容的元素的大小；