offsetWidth 得到对象自己的宽度(得到的值不包含单位) offsetWidth=width+padding+border
例如 div{ width:200px;border-left:2px solid red; padding:10px;}
div = document.getElementById("div");
div.offsetWidth=200+2+10*2=222
同理offsetHeight
offsetLeft 返回距离上级盒子(最近带有定位的的盒子)左边的位置。如果父级都没有定位,则以body为准。
这里的父级从padding开始算 border不算。即,指子盒子到定位父盒子边框到边框的距离。
同理offsetTop
offsetParent
返回改对象的父级(带有定位)不一定是亲的爸爸
如果当前元素的父级元素没有进行CSS定位(position为absolute或relative),offsetParent为body
var son = document.getElementById("son");
//alert(son.parentNode.id);
alert(son.offsetParent.tagName); // tagName标签的名
offsetTop 和 style.top 的区别(同理offsetLeft 和 style.left)
最大的区别在于,offsetTop 可以返回没有定位盒子的距离上部的位置。而style.top 不可以,只有定位的盒子才有top、left、right、bottom
区别2 offsetTop 返回的是数字,而style.top返回说的是字符串,除了数字外还有单位:px
区别3 offsetTop 为只读,而style.top可读可写
区别4 如果没有给html 元素指定通过top样式,则style.top返回的是空字符串。
区别5 style.top 只能得到行内样式,offsetTop随便。