DOM节点2

一、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 。