JavaScript offsetLeft
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 offsetLeft 属性。此属性对于确定元素相对于 DOM 中其偏移父元素的位置至关重要。
基本定义
offsetLeft 属性返回当前元素左上角相对于其偏移父元素的左偏移量（以像素为单位）。偏移父元素是具有定位布局的最近的祖先元素。
如果不存在偏移父元素，则该属性返回元素外左边缘到视口内左边缘的距离。此属性是只读的，并返回一个整数值。
基本的 offsetLeft 示例
此示例演示了如何访问简单 div 的 offsetLeft 值。
<!DOCTYPE html>
<html>
<head>
<title>Basic offsetLeft</title>
<style>
#container {
position: relative;
margin: 50px;
border: 1px solid black;
width: 300px;
height: 200px;
}
#box {
position: absolute;
left: 40px;
top: 30px;
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="container">
<div id="box"></div>
</div>
<script>
const box = document.getElementById('box');
console.log('offsetLeft:', box.offsetLeft);
</script>
</body>
</html>
在这个基本示例中，我们有一个具有相对定位的容器 div 和一个具有绝对定位的嵌套盒子 div。JavaScript 代码将盒子的 offsetLeft 值记录到控制台。
输出将是 40，与左 CSS 属性值匹配，因为容器是偏移父元素。这表明 offsetLeft 如何测量到偏移父元素左边缘的距离。
具有不同偏移父元素的 offsetLeft
此示例显示了 offsetLeft 在不同的偏移父元素场景下如何变化。
<!DOCTYPE html>
<html>
<head>
<title>offsetLeft with Different Parents</title>
<style>
body {
margin: 0;
padding: 20px;
}
#parent1 {
position: relative;
left: 50px;
border: 1px solid red;
padding: 20px;
margin-bottom: 20px;
}
#parent2 {
border: 1px solid blue;
padding: 20px;
}
.child {
width: 100px;
height: 100px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div id="parent1">
<div class="child" id="child1"></div>
</div>
<div id="parent2">
<div class="child" id="child2"></div>
</div>
<script>
const child1 = document.getElementById('child1');
const child2 = document.getElementById('child2');
console.log('Child1 offsetLeft:', child1.offsetLeft);
console.log('Child2 offsetLeft:', child2.offsetLeft);
</script>
</body>
</html>
在这里，我们有两个具有不同定位的父 div。第一个父级具有相对定位，使其成为其子级的偏移父级。第二个父级具有静态定位。
第一个子级的 offsetLeft 将是 20（内边距），而第二个子级的 offsetLeft 将相对于视口，因为其父级未定位。这表明偏移父级如何影响 offsetLeft 值。
动态 offsetLeft 更改
此示例演示了当元素位置更改时 offsetLeft 如何变化。
<!DOCTYPE html>
<html>
<head>
<title>Dynamic offsetLeft</title>
<style>
#container {
position: relative;
width: 400px;
height: 200px;
border: 1px solid black;
}
#movable {
position: absolute;
width: 50px;
height: 50px;
background-color: coral;
left: 20px;
transition: left 0.5s;
}
</style>
</head>
<body>
<div id="container">
<div id="movable"></div>
</div>
<button onclick="moveBox()">Move Box</button>
<p id="positionInfo">Current offsetLeft: 20</p>
<script>
function moveBox() {
const box = document.getElementById('movable');
const info = document.getElementById('positionInfo');
const currentLeft = parseInt(box.style.left) || 20;
const newLeft = currentLeft + 30;
box.style.left = newLeft + 'px';
info.textContent = 'Current offsetLeft: ' + box.offsetLeft;
}
</script>
</body>
</html>
在此示例中，我们在容器内有一个可移动的盒子。单击按钮会将盒子向右移动 30 像素并更新显示的 offsetLeft 值。
这表明 offsetLeft 如何动态反映元素位置的变化。当元素位置更改时，该属性会立即更新，使其可用于实时定位计算。
将 offsetLeft 与其他位置属性进行比较
此示例将 offsetLeft 与 clientLeft 和 scrollLeft 属性进行比较。
<!DOCTYPE html>
<html>
<head>
<title>Position Properties Comparison</title>
<style>
#comparison {
position: relative;
width: 300px;
height: 150px;
border: 5px solid black;
padding: 20px;
margin: 50px;
overflow: auto;
}
#content {
width: 500px;
height: 100px;
background-color: lightyellow;
}
</style>
</head>
<body>
<div id="comparison">
<div id="content">Scrollable content to demonstrate differences</div>
</div>
<button onclick="showValues()">Show Values</button>
<div id="output"></div>
<script>
function showValues() {
const element = document.getElementById('comparison');
const output = document.getElementById('output');
output.innerHTML = `
<p>offsetLeft: ${element.offsetLeft}</p>
<p>clientLeft: ${element.clientLeft}</p>
<p>scrollLeft: ${element.scrollLeft}</p>
`;
}
</script>
</body>
</html>
此示例创建了一个可滚动容器，并比较了三个不同的左位置属性：offsetLeft、clientLeft 和 scrollLeft。每个属性都测量元素位置的不同方面。
offsetLeft 显示到偏移父元素的距离，clientLeft 显示左边框的宽度，scrollLeft 显示水平滚动的像素数。这有助于理解何时使用每个属性。
实际用例：工具提示定位
此示例演示了 offsetLeft 在工具提示定位中的实际用法。
<!DOCTYPE html>
<html>
<head>
<title>Tooltip Positioning</title>
<style>
.item {
display: inline-block;
width: 100px;
height: 50px;
margin: 10px;
background-color: lightblue;
text-align: center;
line-height: 50px;
position: relative;
}
.tooltip {
position: absolute;
background-color: black;
color: white;
padding: 5px;
border-radius: 3px;
white-space: nowrap;
top: -30px;
visibility: hidden;
}
</style>
</head>
<body>
<div class="item" onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)">
Item 1
<div class="tooltip">This is item 1</div>
</div>
<div class="item" onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)">
Item 2
<div class="tooltip">This is item 2</div>
</div>
<script>
function showTooltip(element) {
const tooltip = element.querySelector('.tooltip');
tooltip.style.left = (element.offsetLeft + element.offsetWidth/2 -
tooltip.offsetWidth/2) + 'px';
tooltip.style.visibility = 'visible';
}
function hideTooltip(element) {
const tooltip = element.querySelector('.tooltip');
tooltip.style.visibility = 'hidden';
}
</script>
</body>
</html>
在这个实际示例中，我们使用 offsetLeft 将工具提示居中定位在其各自的项上方。工具提示的左位置是根据项的 offsetLeft 和宽度计算的。
这表明 offsetLeft 如何在实际场景中使用来创建动态、定位的元素。该计算通过考虑项的位置和工具提示的宽度来居中工具提示。
来源
在本文中，我们展示了如何在 JavaScript 中使用 offsetLeft 属性。此属性对于确定元素位置和在 Web 开发中创建动态布局至关重要。
作者
列出 所有 JS DOM 教程。