offsetParent : 离当前节点最近的具有定位属性的祖先节点。 如果所有祖先节点都没有定位属性： 对于一个有定位属性的元素： ie6、7 ： offsetParent 是 html 节点 其它浏览器： offsetParent 是 body 节点 对于一个没有定位的元素： ie6/7 : 最近的一个触发了 haslayout 属性的祖先节点，如果所有祖先节点都没有触发 haslayout ，默认为 body 节点。 其它浏览器： body。 如果当前节点有 display:none; 属性 在 ie11 以上及标准浏览器，offsetParent为null,ie10以下浏览器不受影响。 回流 、重绘 offsetLeft : 当前节点左边到 offsetParent 左边的距离。 offsetTop : 当前节点上边到 offsetParent 上边的距离。 注意： 1，如果body和html有边框和外边距, offsetLeft 和 offsetTop 在所有浏览器下的取值都会不一样。 2，在ie6、7浏览器下 ，offsetLeft和offsetTop会计算 offsetParent 的边框值，其它浏览器不会计算边框值。 3，如果当前节点设置了 display: none; 属性，offsetLeft 和 offsetLeft 的值都为0.(ie6/7下为 -1); 温馨提醒：没有 offsetRight 和 offsetBottom 属性！ ------------------------------------------------------------------------------- ff浏览器bug #box { 1200px; height: 200px; background: #ccc; margin: 50px auto 0; position: relative; border: 4px solid #333; overflow: hidden; } #div1 { 200px; height: 200px; background: red; position: absolute; left: 2px; top: 0; } </style> </head> <body> <div id="box"> <div id="div1"></div> </div> </body> </html> <script> var oDiv = document.getElementById('div1'); //alert( oDiv.offsetLeft ); setInterval(function(){ oDiv.style.left = oDiv.offsetLeft + 2 + 'px'; },30); /* offsetLeft : 在其它浏览器下，就是节点自身的left值。 在firefox下 ： offsetLeft = 节点自身的 left 值 - 边框值 div运动轨迹： 边框为0 left border offsetLeft speed target 0 0 0 2 2 2 0 2 2 4 4 0 4 2 6 6 0 6 2 8 边框与speed相等 left border offsetLeft speed target 0 2 -2 2 0 0 2 -2 2 0 0 2 -2 2 0 0 2 -2 2 0 0 2 -2 2 0 边框大于speed left border offsetLeft speed target 0 4 -4 2 -2 -2 4 -6 2 -4 -4 4 -8 2 -6 ------------------------------------------------------------------------------- width / height / margin / padding / border offsetWidth : width + padding + border clientWidth : width + padding offsetHeight : height + padding + border clientHeight : height + padding 以上四个属性指的是元素在页面中所占空间大小，如果元素没有占页面空间，四个属性的值都为 0 。 ------------------------------------------------------------------------------- 操作属性的前两种方式： . 和 [''] 第三种方式： 获取属性：getAttribute(''); 设置属性：setAttribute('',''); 删除属性：removeAttribute('') 兼容问题： 1，获取以关键字或保留字作为名称的属性时，有兼容问题。 2，获取第二层以上属性时，只有ie浏览器支持。 好处： 1，可以获取行间的自定义属性。 2，可以获取到 url、src、href 等的属性值，而不是路径地址。 (在ie6/7/8下需要设置第二个参数2,告诉浏览器获取的是属性值而不是路径) oDiv.dataset.bbs = 'bbs.miaov.com'; html5 里对自定义属性进行了初步规范，但是要求所有自定义属性都必须以 data- 作为属性名称的开头。