如何获取元素的真实宽高

情况一：

宽高都写在样式表里，即外部样式或嵌入式样式，比如#div{width:120px;}.这种情况通过#div.style.width拿不到宽度，而通过#div.offsetWidth才可以获取到宽度。

情况二：

宽和高是写在行内中的，即内联样式，比如style="width:120px;"这种情况通过上述2种方法都可以得到宽度。

• 因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内,所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过id.style.atrr来获取。
• 现 在的前端制作很少直接把样式写style里了，都是写在样式表里。如果你要获取的样式没有相对应的（就像#div1.style.width对 应#div1.offsetWidth），就只能分别针对不用浏览器来获取样式表的属性了，可以试着搜索“JS 获取样式属性”之类的。
  代码：

var o = document.getElementById("view");
var h = o.offsetHeight; //高度(包括width+padding+border)
var w = o.offsetWidth; //宽度(包括height+padding+border)

三种方法

方法一：使用jquery

 $("#id").height();

方法二：使用dom

document.getElementById("id").style.height   (需要这样设置才能获取到高度，<div id="idName" style="height:300px;">)；
document.getElementById("id").offsetHeight；
document.getElementById("id").clientHeight

方法三：window.getComputedStyle(document.getElementById("id")).height;

getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读。
语法如下：

var style = window.getComputedStyle("元素", "伪类");
例如：
var dom = document.getElementById("test"),
var style = window.getComputedStyle(dom , ":after");

就两个参数，额外提示下：Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 之前，第二个参数“伪类”是必需的（如果不是伪类，设置为null），不过现在嘛，不是必需参数了。