DOM 中的 offset 属性
程序员文章站
2022-06-02 22:16:34
...
1. DOM 中的 offset 属性
1.1. offsetParent
与当前元素最近的经过定位(position 不等于 static)的父级元素，主要分为下列几种情况：
- 元素自身有
fixed定位，offsetParent的结果为null
当元素自身有 fixed 固定定位时，我们知道固定定位的元素相对于视口进行定位，此时没有定位父级，offsetParent 的结果为 null
[注意]firefox 浏览器有兼容性问题
<div id="test" style="position:fixed"></div>
<script>
//firefox并没有考虑固定定位的问题，返回<body>，其他浏览器都返回null
console.log(test.offsetParent);
</script>- 元素自身无
fixed定位，且父级元素都未经过定位，offsetParent的结果为<body>
<div id="test"></div>
<script>
console.log(test.offsetParent);//<body>
</script>- 元素自身无
fixed定位，且父级元素存在经过定位的元素，offsetParent的结果为离自身元素最近的经过定位的父级元素
<div id="div0" style="position:absolute;">
<div id="div1" style="position:absolute;">
<div id='test'></div>
</div>
</div>
<script>
console.log(test.offsetParent); //<div id="div1">
</script>-
<body>元素的parentNode是null
console.log(document.body.offsetParent);//null1.2. offsetLeft
offsetLeft 表示元素的左外边框至 offsetParent 元素的左内边框之间的像素距离
1.3. offsetTop
offsetTop 表示元素的上外边框至 offsetParent 元素的上内边框之间的像素距离
offsetTop 和 style.top 的区别：
- 最大区别在于
offsetLeft可以返回没有定位盒子的距离左侧的位置。 而style.top不可以 只有定位的盒子 才有 left top right -
offsetTop返回的是数字，而style.top返回的是字符串，除了数字外还带有单位：px。 -
offsetTop只读，而style.top可读写。 - 如果没有给
HTML元素指定过top样式，则style.top返回的是空字符串。 - 最重要的区别
style.left只能得到 行内样式offsetLeft随便
1.4. offsetWidth
offsetWidth 表示元素在水平方向上占用的空间大小，无单位(以像素 px 计)
offsetWidth = border-left-width + padding-left + width + padding-right + border-right-width;
1.5. offsetHeight
offsetHeight 表示元素在垂直方向上占用的空间大小，无单位(以像素 px 计)
offsetHeight = border-top-width + padding-top + height + padding-bottom + border-bottom-width;
1.6. 注意事项
- 所有偏移量属性都是只读的
- 如果给元素设置了 display:none，则它的偏移量属性都为 0
- 每次访问偏移量属性都需要重新计算
上一篇： 心脏有点大
下一篇： NBA与中国合作出现危机