js获取高度和宽度

 

CreateTime--2017年7月24日10:15:47
Author:Marydon

js获取高度和宽度

参考连接：http://www.cnblogs.com/EasonJim/p/6229517.html

实现方式：

　　　　style.height----offsetHeight,style.width----offsetWidth

第一种情况：

　　宽高都写在样式表里，就比如 #div1{width:120px;height:100px;}。

　　获取id=‘div1’的宽和高，如何实现？

　　通过document.getElementById('div1').style.height/width，返回值为空，即获取不到宽和高；

　　必须通过document.getElementById('div1').offsetHeight/offsetWidth　　

第二种情况：

　　宽和高写在行内，如style="width:120px;height:100px;"

　　上述2个方法都能获取到宽度和高度

两者的区别：

　　a.通过style.attr的方式取值有限制条件：即要获取的属性必须在行内样式中声明；而id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内，都能获取到元素的宽和高；

　　b.offsetWidth/offsetHeight=容器宽度+两侧边框宽度，返回值是数值；而style.attr返回的就是div的宽度，返回值是数值+"px"。