js获取Html元素的实际宽度高度

标签：

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

情况二：宽和高是写在行内中，即内联式样式，比如style="width:120px;"，这中情况通过上述2个方法都能拿到宽度。

因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内，所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过id.style.atrr来获取。

代码：
var $ = document.getElementById("view");
var h = $.offsetHeight;  //高度
var w = $.offsetWidth;  //宽度

现在的前端制作很少直接把样式写style里了，都是写在样式表里。如果你要获取的样式没有相对应（即#div1.style.width与#div1.offsetWidth的值不等，因为offset计算时包括padding和border），就只能分别针对不用浏览器来获取样式表的属性了，方法如下：

//ie8及以前版本：通过currentStyle

alert(document.getElementById(‘id‘).currentStyle.width);

//ff,safari,opera,chrome,ie9及之后版本:通过window.getComputedStyle

var el=document.getElementById(‘id‘);

alert(window.getComputedStyle(el,null).width);

附录：样式分类 
外部样式 External Style Sheet 
以CSS为扩展名的文件（又称为"超文本样式表"文件），它的作用范围可以是多张网页，或整个网站，甚至不同的网站。与网页链接后，才能应用。 
嵌入式样式 internal Style Sheet （<style></style>）
包含在网页内部的样式设置，它的作用范围仅限于嵌入的网页。 
内联式样式 inline Style 
在HTML文档中，内联式样式表的格式化信息直接插入所应用的网页元素的HTML标签中，作为其HTML标签的属性参数。严格地说，内联样式表称不上表，仅仅是一条HTML标记。 
当出现相同的样式时，优先级是内联大于嵌入式样式, 嵌入式样式大于外部样式。

js获取Html元素的实际宽度高度

标签：

原文地址：http://www.cnblogs.com/ztoz/p/5468561.html