假设 obj 为某个 HTML 控件。
obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。
obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。
obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。
我们对前面提到的“上方或上层”与“左方或上层”控件作个说明。
例如：
<div id="tool">
<input type="button" value="提交">
<input type="button" value="重置">
</div>
“提交”按钮的 offsetTop 指“提交”按钮距“tool”层上边框的距离，因为距其上边最近的是 “tool” 层的上边框。
“重置”按钮的 offsetTop 指“重置”按钮距“tool”层上边框的距离，因为距其上边最近的是 “tool” 层的上边框。
“提交”按钮的 offsetLeft 指“提交”按钮距“tool”层左边框的距离，因为距其左边最近的是 “tool” 层的左边框。
“重置”按钮的 offsetLeft 指“重置”按钮距“提交”按钮右边框的距离，因为距其左边最近的是“提交”按钮的右边框。
offsetTop 可以获得 HTML 元素距离上方或外层元素的位置，style.top 也是可以的，二者的区别是：
一、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
二、offsetTop 只读，而 style.top 可读写。
三、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。
offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
以上主要指IE之中，FireFox差异如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
相关推荐
rotationCenterY = img.offsetTop + img.offsetHeight / 2; }); document.getElementById('image').addEventListener('mousemove', function(e) { if (e.buttons === 1) { // 鼠标左键按住 var rotationEndAngle...
这通常涉及到`offsetLeft`和`offsetTop`属性的修改。 4. **边界检测**：为了防止元素移出容器或者屏幕，可能需要进行边界检测，确保元素在允许的范围内移动。 5. **事件释放**：在`mouseup`事件中，停止监听`...
let y = event.clientY - this.offsetTop; // 获取鼠标相对div的y坐标 document.getElementById('myImage').style.left = `${x - this.offsetWidth/2}px`; // 移动图片 document.getElementById('myImage').style...
aLi[i].style.top = aLi[i].offsetTop + 'px'; } for (var i = 0; i ; i++) { aLi[i].style.position = 'absolute'; aLi[i].style.margin = '0'; // 清除原有margin } // 加事件 for (var i = 0; i ; i++) {...
JavaScript 实现 HTML 转 PDF 高清版是将网页中的 HTML 内容转换为高质量、高分辨率的 PDF 文档的技术。在许多场景下，比如用户需要保存网页内容或者生成可打印的报告时，这样的功能非常有用。以下将详细介绍如何...
c_y = getPos(e).y - canvas.offsetTop; requestAnimationFrame(drawFram); } }, false); canvas.addEventListener('mouseup', function (e) { isMouseDown = false; }, false); ``` 这里，`getPos`函数用于...
} else if (element.offsetTop > yDestination) { yPosition = element.offsetTop - 1; } element.style.left = xPosition + 'px'; element.style.top = yPosition + 'px'; if ((xPosition != xDestination)...
var y = event.clientY - element.offsetTop; // 根据x和y坐标计算旋转角度 var rotateX = y * 0.01; var rotateY = x * 0.01; // 更新CSS3 3D旋转 element.style.transform = `rotateX(${rotateX}deg) ...
mouseY = event.clientY - canvas.offsetTop; }); ``` 接着，我们可以创建一个3D效果的函数。这通常涉及到矩阵变换，如平移、旋转和缩放。例如，你可以使用以下代码来实现鼠标跟随的3D旋转： ```javascript ...
innerSquare.offsetTop || innerSquare.offsetTop > centerY - innerSquare.offsetHeight) { moveSquare(); } } setInterval(moveSquare, 10); ``` 在这个例子中，`getRandomPointInCircle`函数用于生成圆形...
ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop); ctx.stroke(); // 更新起点坐标 lastX = e.clientX - canvas.offsetLeft; lastY = e.clientY - canvas.offsetTop; } } function ...
elemTop = element.offsetTop; } }); element.addEventListener('mousemove', function(event) { if (dragStartX && dragStartY) { let newX = event.clientX - dragStartX; let newY = event.clientY - ...
if (ball.offsetTop + ball.offsetHeight >= flap.offsetTop && ball.offsetTop <= flap.offsetTop + flap.offsetHeight) { speed *= -1; } // 检测球与砖块的碰撞 bricks.forEach(brick => { if ...
ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop); ctx.stroke(); }); canvas.addEventListener('mouseup', () => { isDrawing = false; }); ``` 4. **保存和分享**：用户完成...
drawLine(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop); } }); canvas.addEventListener('mouseup', function() { isDrawing = false; }); ``` `drawLine`函数内部会使用Canvas的`...
const y = event.clientY - this.offsetTop; // 获取点击位置的颜色，这里假设canvas上已经绘制了颜色轮 const color = getPixelColorFromCanvas(x, y); updateColor(color); }); // 转换颜色代码 function ...
if (ctx.isPointInPath(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop)) { ctx.lineTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop); ctx.stroke(); } }); ...
obj.offsetTop < nearObj.offsetTop + nearObj.offsetHeight && obj.offsetTop + obj.offsetHeight > nearObj.offsetTop) { // 交换位置 var temp = aData[obj.index]; aData[obj.index] = aData[nearObj.index...
3. 将`event.clientX`和`event.clientY`减去图片的`offsetLeft`和`offsetTop`，以修正图片在页面上的位置偏移。 对于`<div>`元素，步骤类似，但要考虑`div`的`clientWidth`、`clientHeight`以及可能存在的CSS样式，...
利用原生JavaScript的offsetTop属性，通过监听滚动事件来判断元素是否已经滚动到顶部位置，从而切换元素的固定或相对定位。文章中提供了一个兼容不同浏览器的getOffset函数，用于获取元素相对于文档顶部的实际偏移量...