元素的各种位置尺寸宽高-4

还是用之前的那个DOM结构

1
2
3
4
5
6
7
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>

1
2
3
4
div{padding: 40px 30px;}
#div1{background: #ccc;}
#div2{background: #777;position: relative;}
#div3{background: #f60;}

offsetTop、offsetLeft其实在本质上没有什么区别,只是目标点不同而已
offsetTop[Left]: 只读属性,当前元素到定位父级的距离(或者叫偏移值)

1
2
var oDiv3 = document.getElementById('div3');
alert(oDiv3.offsetTop);

总结:
这个属性一样也是有兼容性问题的,在IE7下,如果自己没有定位的话,那么offsetTop[Left]是到body的距离,所以给自己加个定位,那么在IE7就正常了
如果没有定位父级的话,offsetParent 指向的是body。IE7指向的是HTML,
而offsetLeft指向的是HTML
如果有定位父级,是到定位父级的距离

1
#div3{background: #f60;position: relative;}

继续下一个东西:获取宽高

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

1
2
3
4
var oDiv = document.getElementById('div1');
alert(oDiv.style.width); // 在所有浏览器下都会弹出100。style.width: 样式宽,
alert(oDiv.clientWidth); // clientWidth: 样式宽+padding (可视区宽,看得见的)
alert(oDiv.offsetWidth); // 样式宽+padding+border 可视区宽+border 1