元素各种位置宽高

offsetLeft

offsetLeft[Top]:只读，属性，当前元素到定位父级的距离（偏移值），就是到当前元素的offsetParent的距离。

当前元素没有定位，但是有定位父级

css部分：

<style>
div {padding: 40px 50px;}
#div1 {background: red;}
#div2 {background: green;position: relative;}
#div3 {background: orange; }
</style>

js部分：

window.onload = function() {	
var oDiv3 = document.getElementById('div3');  
alert( oDiv3.offsetLeft );	
}

html部分:

<body id="body1">
	<div id="div1">
    	<div id="div2">
        	<div id="div3"></div>
        </div>
    </div>
</body>

上述代码在ie11和Ie7的效果如下两图所示，可以得出结论：在ie7下，如果自己没有定位，那么offsetLeft[Top]是到body的距离。所以会显示100px

当前元素有定位的情况，且定位父级

css部分:

<style>
div {padding: 40px 50px;}
#div1 {background: red;}
#div2 {background: green;position: relative;}
#div3 {background: orange;position: relative; }
</style>

其余部分代码同上个例子。ie11的效果同上个例子，但是Ie7的效果发生了变化，当前元素有定位的情况下，是到定位父级的距离。

当前元素有定位，但是没有定位父级

当前元素如果没有定位父级，offsetLeft默认的情况下是到body的，但是在Ie7下是指向到html的(在ie7以下body的默认margin-left值是10px)。
css部分:

<style>
div {padding: 40px 50px;}
#div1 {background: red;}
#div2 {background: green;}
#div3 {background: orange;position: relative; }
</style>

其余部分代码同例子一。

offsetTop

css部分：

<style>
div {padding: 40px 50px;}
#div1 {background: red;}
#div2 {background: green;}
#div3 {background: orange;position: relative; }
</style>

js部分:

window.onload = function() {	
var oDiv3 = document.getElementById('div3');  
alert( oDiv3.offsetLeft );	
}

效果如下,得出结论：ie7下的html默认margin-top是15px

小结

如果有定位父级：
ie7以下：如果自己没有定位，那么offsetLeft[Top]是到body的距离；
如果自己有定位，那么就是到定位父级的距离。
其他浏览器：到定位父级的距离。

元素宽高

html部分：

1
2
3

<body>
	<div id="div1" style="width: 100px; height: 100px; border: 1px solid red; padding: 10px; margin: 10px;"></div>
</body>

js部分:

<script>
window.onload = function() {	
var oDiv = document.getElementById('div1');
alert( oDiv.style.width );	//样式宽100
alert( oDiv.clientWidth );	//样式宽 + padding=可视区宽	120
alert( oDiv.offsetWidth );	//样式宽 + padding + border  可视区宽 + 边框	122	
}  
<script>

得到三个宽度分别为: