元素的偏移位置指的是相对于最近定位的父节点或 body 元素的偏移位置。使用元素的 offsetParent 属性可以获取元素的最近定位的父节点,而使用 offsetLeft 和 offsetTop 属性可以分别获取元素相对定位父元素或 body 元素的水平和垂直偏移位置。
【例 1】获取元素的偏移父节点。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>获取偏移父节点</title>
<style>
#div2{
position:relative;
}
#div3{
position:relative;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3">
<div id="div4"></div>
</div>
</div>
</div>
<script>
var div2 = document.getElementById('div2');
var div4 = document.getElementById('div4');
console.log("第二个div的偏移父节点为:");
console.log(div2.offsetParent);
console.log("第四个div的偏移父节点为:");
console.log(div4.offsetParent);
</script>
</body>
</html>
上述代码在 Chrome 浏览器中的运行结果如图 1 所示。
【例 2】获取元素的水平和垂直偏移位置。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>获取元素的水平及垂直偏移位置</title>
<style>
#div1{width:100px;height:100px;border:3px solid red;}
#div2{width:70px;height:70px;border:3px solid blue;position:relative;}
#div3{width:50px;height:50px;border:3px solid green;position:absolute;left:20px;
top:10px;}
#div4{width:30px;height:30px;border:3px solid olive;position:absolute;left:20px;
top:10px;}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3">
<div id="div4"><div>
</div>
</div>
</div>
<script>
var div2 = document.getElementById('div2');
var div4 = document.getElementById('div4');
console.log("第二个div的水平偏移位置为:");
console.log(div2.offsetLeft);
console.log("第四个div的水平偏移位置为:");
console.log(div4.offsetLeft);
console.log("第二个div的垂直偏移位置为:");
console.log(div2.offsetTop);
console.log("第四个div的垂直偏移位置为:");
console.log(div4.offsetTop);
</script>
</body>
</html>
上述代码在 Chrome 浏览器中的运行结果如图 2 所示。
由例 2 的 CSS 代码可知,第二个 div 没有定位父节点,所以其偏移相对于 body 节点,其水平和垂直偏移位置分别等于第一个 div 的边框宽度(3px)加上 body 的默认外边距(8px),因而结果为 11px。
第四个 div 有两个定位祖先节点,其中第三个 div 离它最近,因而它的偏移父节点为第三个 div,它的样式代码中的 left 属性值(20px)正是相对于偏移父节点的水平距离,top 属性值(10px)正是相对于偏移父节点的垂直距离,因而它的水平和垂直偏移位置分别为 20 和 10。
第四个 div 使用了内嵌样式代码来设置水平和垂直偏移,因而它的偏移位置也可以使用 getComputedStyle() 来获取,即 div4.offsetLeft 也可以使用 getComputedStyle(div4).left 来代替;div.offsetTop 使用 getComputedStyle(div4).top 来代替。需要注意的是,getComputedStyle() 方法获取的结果默认为 px 为单位,并会在结果中包含 px。