offsetLeft、offsetTop等的区别

最新推荐文章于 2024-05-20 10:22:47 发布
最新推荐文章于 2024-05-20 10:22:47 发布
阅读量419 收藏
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44538675/article/details/86611892
版权

offsetLeft     对象相对于定位父级左边距

offsetTop     对象相对于定位父级上边距

offsetWidth     对象本身的宽

offsetHeight     对象本身的高（包括内边距和滚动条和边框）

clientHeight     本身的高度，包含被父元素滚动隐藏的部分，不包含自身的滚动条和边框

clientWidth       本身的宽度，包含被父元素滚动隐藏的部分，不包含自身的滚动条和边框

scrollHeight      元素的总高度（包含被滚动条隐藏的高度）包含边框

scrollTop   滚动条高度，滚动隐藏部分的内容高度，包含边框

 

offsetX   offsetY  鼠标相对于事件源的坐标

 

clientX     clientY    鼠标相对于可视区域的坐标

 

pageX    pageY      鼠标相对于文档的坐标

 

screenX    screenY   鼠标相对于屏幕的坐标

 

 

cc果冻LXY
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
offsetLeft、offsetTop全面解析
qq_52475404的博客
10-19 704
offsetLeft、offsetTop全面解析 一、第一个小例子 <body> <style> body { margin:0; } .box1 { width:300px; height:300px; margin:100px; background:#333; overflow:hidden; } .box2 { width:200px; height:200px; margin:100px; background:#666; overflow:hi
offsetleft和offsettop的使用
m0_71814235的博客
09-03 1002
offsetleft和offsettop的使用
offsetTop、clientHeight、scrollTop等属性的含义
最新发布
qq_53895518的博客
05-20 437
包含元素的引用保存在offsetParent属性中，不一定是parentNode，比如的offsetParent是，因为它是DOM层次中距最近的一个具有大小的元素。所有的偏移量属性都是只读的，而且每次访问都要重新计算，避免重复访问。四、innterHeight和outerHeight。这两个属性也是只读和需要重新计算的。二、客户区大小-以client开头的。一、偏移量-以offset开头的。三、滚动大小-scroll开头的。
div.offsetLeft offsetTop详解
qq_37805832的博客
09-18 1633
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ ma
【JavaScript】全面解析offsetLeft、offsetTop
热门推荐
汪小穆的博客
05-26 5万+
前言：偏移量，很多动画效果的实现都是通过去改变偏移量的改变来实现的，但是你真的完全了解offsetLeft，offsetTop吗？ 一、第一个小例子 <body> <style> body { margin:0; } .box1 { width:300px; height:300px; margin:100px; background:#333...
一文读懂offsetHeight/offsetLeft/offsetTop/offsetWidth/offsetParent
weixin_61597234的博客
12-22 1597
1.offsetHeight：获取元素的高度（在垂直方向上占用的空间大小）,offsetWidth = 可视区的width+左右padding+左右边框 = 450+(10*2)+......
offsetLeft&offsetTop
薄荷
08-03 143
前言：偏移量，很多动画效果的实现都是通过去改变偏移量的改变来实现的，但是你真的完全了解offsetLeft，offsetTop吗？ 一、第一个小例子 <body> <style> body { margin:0; } .box1 { width:300px; height:300px; margin:100px; background:#333; overflow:hidden; } .box2 { width:200px; height:200p...
clientWidth clientHeight offsetWidth offsetHeight scrollWidth scrollHeight offsetLeft offsetTop
蒲公英芽的博客
01-05 626
clientWidth、clientHeight，指元素的width+padding-滚动条的宽度和高度 来一张图说明一下： body的clientWidth为body的width+padding body的clientHeight是内容高度，如果没有内容，高度为0 html的clientWidth为浏览器窗口的宽度，不包括滚动的宽度 html的clientHeight为浏览器窗口的高度，不包...
offsetLeft和offsetTop
6块腹肌的博客
12-17 162
offsetLeft 获取自身左边框到定位的父级元素的左边框的距离 offsetTop 获取自上左边框到定位的父级元素的上边框的距离 注意：需要父元素设置为：position：relative；时，才可以获取到这两个值 ...
JS-offsetLeft和offsetTop
堇年
10-05 112
获取元素到第一个定位祖先元素之间的偏移位 如果没有祖先元素是定位的, 那么就是获取到body的偏移位 <style> *{ margin: 0; padding: 0; } .father{ width: 200px; height: 200px; margin-top: 100...
Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性第1/2页
10-30
Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性 在Javascript拖拽系列文章中，offsetLeft、offsetTop、offsetWidth、offsetHeight四个属性都是非常重要的，它们都是关于位置定位...
简单谈谈offsetleft、offsetTop和offsetParent
01-18
ele.offsetLeft和ele.offsetTop取值问题，分多种情况： 如果ele是body的直接子元素，返回值则是ele距离body左侧或顶部的距离 如果ele不是body的直接子元素，在父元素进行定位(relative,absolute)的情况下，各...
获取offsetTop和offsetLeft值的js代码(兼容)
10-27
offsetTop和offsetLeft的值在某些特殊的情况下是会使用到的，为了实现值的准确获取，本文采用js代码实现下，有需求的朋友可以参考下哈
浅析offsetLeft,Left,clientLeft之间的区别
09-04
在JavaScript和Web开发中，了解DOM元素的定位属性至关重要，特别是`offsetLeft`, `left`, 和`clientLeft`之间的区别。这些属性可以帮助开发者精确地控制和计算元素在页面上的位置和大小。 首先，`offsetLeft`是元素...
事件传播顺序
cc果冻LXY的博客
03-08 9236
DOM事件存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。 事件捕获：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。 事件冒泡：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点 **dom标准事件流的触发的先后顺序为：**先捕获再冒泡，即当...
九宫格，换位置
cc果冻LXY的博客
01-18 1704
先布局好，布局不同，js就会不同   &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css"&gt;
按删除键，一删删除一行
cc果冻LXY的博客
01-19 1129
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;成绩&lt;/title&gt; &lt;style type="text/css"&gt; td{ border
判断密码长度及强弱程度
cc果冻LXY的博客
01-19 935
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;input type="text&quot
js中的offsetleft和offsettop
06-01
<h3>回答1：</h3><br/>在JavaScript中，`offsetLeft`和`offsetTop`是用来获取元素相对于其父元素的左偏移量和上偏移量的属性。 `offsetLeft`表示元素的左边框相对于其父元素的左边框的距离，而`offsetTop`表示元素的上边框相对于其父元素的上边框的距离。注意，这两个属性的值不包括元素的外边距和边框。 例如，如果有一个元素`<div>`，它的父元素是另一个`<div>`，那么`<div>`的`offsetLeft`和`offsetTop`属性值将表示它相对于其父元素左上角的偏移量。如果你想获取相对于文档顶部和左侧的偏移量，你需要通过遍历元素的父元素来获取其相对于文档顶部和左侧的偏移量，并将其加到`offsetLeft`和`offsetTop`属性值中。 示例代码如下： ```javascript var element = document.getElementById('myElement'); var offsetLeft = element.offsetLeft; var offsetTop = element.offsetTop; var parent = element.offsetParent; while (parent !== null) { offsetLeft += parent.offsetLeft; offsetTop += parent.offsetTop; parent = parent.offsetParent; } console.log('Left offset:', offsetLeft); console.log('Top offset:', offsetTop); ``` 在这个例子中，我们首先获取元素的`offsetLeft`和`offsetTop`属性值，然后遍历其父元素并将它们的偏移量累加到`offsetLeft`和`offsetTop`中。最后，我们将结果打印到控制台上。 <h3>回答2：</h3><br/> <h3>回答3：</h3><br/>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值