jquery 获取某个元素距离整个页面的坐标位置

已于 2022-04-06 18:05:47 修改
阅读量717 收藏
点赞数
分类专栏： js (JavaScript) JQuery 文章标签： jquery css3 html
于 2022-01-07 16:40:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42740797/article/details/122367694
版权
本文档介绍了如何在网页中获取元素的绝对和相对位置，通过`offset()`方法获取相对于页面的坐标，以及使用`position()`获取相对于父元素的坐标，是前端开发者必备的CSS和JavaScript技巧。
摘要由CSDN通过智能技术生成

获取相对整个页面坐标的位置：

var X = $('#ElementID').offset().top;

var Y = $('#ElementID').offset().left;

获取相对(父元素)坐标的位置:

var X = $('#ElementID').position().top;

var Y = $('#ElementID').position().left;

草字
关注
专栏目录
js 获取元素位置和大小_js 位置_Js宽度高度（详解）
天马3798
12-10 3658
如obj.style.top、obj.style.wdith等，在读的时候，他们返回的值常常是带有单位的(如px)，同时，对于这种方式，它只能够获取到该元素的行内样式，而并不能获取到该元素最终计算好的样式，这就是在读取属性值得时候和以上只读属性的区别，要获取计算好的样式，请使用obj.currentstyle（IE）和getComputedStyle(IE之外的浏览器)。该属性指的是当元素其中的内容超出其宽高的时候，元素被卷起的高度和宽度，即滚动条宽高度。
页面滚动到某一位置吸顶_4 种滚动吸顶实现方式的比较
weixin_39611208的博客
12-21 949
前言我入职第二家公司接到的第一个需求就是修复之前外包做的滚动吸顶效果。我当时很纳闷为何一个滚动吸顶会有 bug，后来我查看代码才发现直接用的是 offsetTop 这个属性，而且并没有做兼容性处理。offsetTop用于获得当前元素到定位父级( element.offsetParent )顶部的距离(偏移值)。定位父级 offsetParent 的定义是：与当前元素最近的 position != ...
js与jquery中获取当前鼠标的x、y坐标位置的代码
12-08
代码如下: <div id=”testDiv”>放在我上面</div> [removed] $(‘#testDiv’).mousemove(function(e) { var xx = e.originalEvent.x || e.originalEvent.layerX || 0; var yy = e.originalEvent.y || e.originalEvent.layerY || 0; $(this).text(xx + ‘—‘ + yy); }); [removed] javascript获取鼠标当前位置坐标 鼠标滑动显示鼠标的当前位
JQuery 获取页面某一元素在屏幕上的位置
weixin_30826095的博客
02-25 1730
获取页面某一元素的绝对X,Y坐标 varX = $('#ElementID').offset().top;//元素在当前视窗距离顶部的位置 varY = $('#ElementID').offset().left; 获取相对(父元素)位置: varX = $('#ElementID').position().top; varY = $('#ElementID').position...
Jquery获取元素坐标
weixin_30336061的博客
07-29 212
获取页面某一元素的绝对X,Y坐标，相对于浏览器窗体，可以用offset()方法： var X = $('#DivID').offset().top; var Y = $('#DivID').offset().left; 获取相对(父元素)位置: var X = $('#DivID').position().top; var Y = $('#DivID').position().le...
jQuery获得页面元素的绝对/相对位置
weixin_30301449的博客
09-30 103
获取页面某一元素的绝对X,Y坐标，可以用offset()方法： var X = $('#DivID').offset().top; var Y = $('#DivID').offset().left; 获取相对(父元素)位置: var X = $('#DivID').position().top; var Y = $('#DivID').position().left; 让...
JQuery获取某元素的的坐标
qq_37555524的博客
09-18 1200
获取页面某一元素的绝对X,Y坐标，可以用offset()方法：（body属性设置margin :0;padding:0;） var X = $('#DivID').offset().top; var ...
JQuery 获得绝对,相对位置的坐标方法
10-29
在网页开发中，有时我们需要获取页面上某个元素的精确位置，以便进行动态布局或交互效果。JQuery 提供了方便的方法来获取元素的绝对位置和相对位置坐标。这里我们将详细探讨 `offset()` 和 `position()` 这两个方法...
jQuery 获得控件的坐标位置
12-27
在网页开发过程中，经常需要获取页面元素的坐标位置，以便实现特定的功能，如弹窗定位、元素拖拽等。jQuery 提供了一系列方法来方便地获取这些坐标值。本文将详细介绍如何使用 jQuery 来获取元素相对于窗口以及滚动...
jquery获取当前元素的坐标
zcaixx的博客
06-13 2773
1，获取对象 var obj = $("#id号"); 或 var obj = $(this); 2，获取对象元素的位置(offset()方法) var offset = obj.offset(); 获取对象元素的位置，分别是元素的top和left， 用方法是：offset.left和offset.top，可知当前对象的左部和顶部位置。 3，获取对象元素的宽度(width()方法) var ...
Js 获取屏幕坐标
weixin_33712987的博客
03-02 105
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title&g...
JQuery 获取页面某一元素的位置
abc1884450的博客
02-15 1468
获取页面某一元素的绝对X,Y坐标 var X = $('#ElementID').offset().top; var Y = $('#ElementID').offset().left; 获取相对(父元素)位置: var X = $('#ElementID').position().top; var Y = $('#ElementID').position().left; ...
JQueryDOM距离屏幕部位的距离
热门推荐
mrlal
02-24 12万+
&lt;body style="border:10px solid #ccc;padding:0px 0px;margin:5px 10px"&gt; &lt;div style="width:60%;border-right:1px dashed red;float:left;"&gt; &lt;div style="float:left;"&gt; ..
jQuery中元素的坐标
jhl13475236412的博客
07-30 222
<script src="./jquery.min.js"></script> <script> 获取元素的坐标位置 不需要通过事件对象,可以直接通过标签对象获取 1 , offset() 获取标签对象,到页面左上角的间距 执行结果是对象 top 上距离 left 左距离 获取与页面左上角的间距 $('p').offset();**加粗样式** 可以设...
【JavaScript】一个简单的jQuery事件：获取当前鼠标的坐标
weixin_43013118的博客
01-28 1247
jQuery的简单使用
jQuery 位置操作
最新发布
qq_67226877的博客
09-11 702
该方法有2个属性left，offset（），top 用于获取距离文档顶部的距离，offset（）.left用于获取距离文档左侧的距离。position（）方法用于返回被选元素相对带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。offset（）方法设置或返回被选元素相对于文档的偏移坐标，跟腹肌没有关系。可以设置元素的偏移：offset（{top：10，left：30}）；scrollTop（）方法设置或返回被选元素被卷去的头部。不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。
jQuery之操作节点/获取元素位置
weixin_44395929的博客
03-03 664
//今天回顾一下jQuery如何操作节点和获取元素位置。 jQuery 的节点操作 创建节点 => 对应原生 js 里面的 createElement() 用法： $(“html 格式的文本”) => $("<div>aha</div>") 插入节点 => 对应...
jQuery获取各种位置方法
weixin_30307921的博客
09-22 715
一、获取窗口的宽高 　　1、获取流览器显示区域的高度 ： $(window).height(); 　　2、获取流览器显示区域的宽度 ： $(window).width(); 　　3、获取文档流的高度 ： $(documen).height(); 　　4、获取文档流宽度 ： $(document).width(); 　　说明：$(window).height()获取的是你的页面在...
jquery如何获取浏览器某个元素到页面顶部的距离
05-30
可以使用jQuery的offset()方法来获取一个元素相对于文档的偏移量，然后再减去页面滚动的距离，就可以得到该元素到...其中`#yourElement`是要获取距离的元素的选择器。`$(window).scrollTop()`是获取页面滚动的距离。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

草字

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值