一、offsetParent : 离当前节点最近的具有定位属性的祖先节点。
如果所有祖先节点都没有定位属性:
1.对于一个有定位属性的元素:
ie6、7 : offsetParent 是 html 节点
其它浏览器: offsetParent 是 body 节点
2. 对于一个没有定位的元素:
ie6/7 : 最近的一个触发了 haslayout 属性的祖先节点,如果所有祖先节点都没有触发 haslayout ,默认为 body 节点。
其它浏览器: body。
注:haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分,大多IE下的显示错误,就是源于 haslayout
hasLayout属性是微软特有的过时属性,在IE8、IE9中,hasLayout属性已经被废弃
3. 如果当前节点有 display:none; 属性 在 ie11 以上及标准浏览器,offsetParent为null,ie10以下浏览器不受影响。
二、offsetLeft : 当前节点左边到 offsetParent 左边的距离。
offsetTop : 当前节点上边到 offsetParent 上边的距离。
注意:
1,如果body和html有边框和外边距, offsetLeft 和 offsetTop 在所有浏览器下的取值都会不一样。
2,在ie6、7浏览器下 ,offsetLeft和offsetTop会计算 offsetParent 的边框值,其它浏览器不会计算边框值。
3,如果当前节点设置了 display: none; 属性,offsetTop 和 offsetLeft 的值都为0.(ie6/7下为 -1);
温馨提醒:没有 offsetRight 和 offsetBottom 属性!
三、offsetWidth : width + padding + border
clientWidth : width + padding
offsetHeight : height + padding + border
clientHeight : height + padding
以上四个属性指的是元素在页面中所占空间大小,如果元素没有占页面空间,四个属性的值都为 0 。
网友评论