jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标

获取页面某一元素的绝对X,Y坐标，可以用offset()方法：


代码如下:

<span style="color:#000066; font-weight:bold">var</span> X <span style="color:#339933">=</span> $<span style="color:#009900">(</span><span style="color:#3366CC">'#DivID'</span><span style="color:#009900">)</span>.<span style="color:#660066">offset</span><span style="color:#009900">(</span><span style="color:#009900">)</span>.<span style="color:#660066">top</span><span style="color:#339933">;</span>
<span style="color:#000066; font-weight:bold">var</span> Y <span style="color:#339933">=</span> $<span style="color:#009900">(</span><span style="color:#3366CC">'#DivID'</span><span style="color:#009900">)</span>.<span style="color:#660066">offset</span><span style="color:#009900">(</span><span style="color:#009900">)</span>.<span style="color:#660066">left</span><span style="color:#339933">;</span>

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


代码如下:

<span style="color:#000066; font-weight:bold">var</span> X <span style="color:#339933">=</span> $<span style="color:#009900">(</span><span style="color:#3366CC">'#DivID'</span><span style="color:#009900">)</span>.<span style="color:#660066">position</span><span style="color:#009900">(</span><span style="color:#009900">)</span>.<span style="color:#660066">top</span><span style="color:#339933">;</span>
<span style="color:#000066; font-weight:bold">var</span> Y <span style="color:#339933">=</span> $<span style="color:#009900">(</span><span style="color:#3366CC">'#DivID'</span><span style="color:#009900">)</span>.<span style="color:#660066">position</span><span style="color:#009900">(</span><span style="color:#009900">)</span>.<span style="color:#660066">left</span><span style="color:#339933">;</span>

赞 (0)

相关推荐

  • jQuery获取页面元素绝对与相对位置的方法

    本文实例讲述了jQuery获取页面元素绝对与相对位置的方法.分享给大家供大家参考.具体如下: 获取页面某一元素的绝对X,Y坐标,可以用offset()方法: var X = $('#DivID').offset().top; var Y = $('#DivID').offset().left; 获取相对(父元素)位置: var X = $('#DivID').position().top; var Y = $('#DivID').position().left; var pleft = $("s

  • JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合

    因为浏览器的兼容问题,如果使用javascript获取这些数值是一个相当痛苦的过程.好在JQuery提供了简单优雅,并且兼容的解决方法. 获取浏览器和页面文档的宽度和高度 复制代码 代码如下: //获取浏览器显示区域的高度 $(window).height(); //获取浏览器显示区域的宽度 $(window).width(); //获取页面的文档高度 $(document.body).height(); //获取页面的文档宽度 $(document.body).width(); 获取滚动条的位

  • jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置

    此控件是基于Jquery开发的,要引用Jquery框架 控件代码 复制代码 代码如下: $.fn.myNudge = function() { var self = $(this); self.css({ position: "absolute" }); //让这个元素绝对定位 var selfLeft = self.css("left"); var selfTop = self.css("top"); self.css({ left: self

  • JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)

    js与jquery获得页面大小.滚动条位置.元素位置 复制代码 代码如下: //页面位置及窗口大小 function GetPageSize() {var scrW, scrH; if(window.innerHeight && window.scrollMaxY) {    // Mozilla    scrW = window.innerWidth + window.scrollMaxX;    scrH = window.innerHeight + window.scrollMaxY

  • jquery获取html元素的绝对位置和相对位置的方法

    绝对位置坐标: 复制代码 代码如下: $("#elem").offset().top $("#elem").offset().left 相对父元素的位置坐标: 复制代码 代码如下: $("#elem").position().top $("#elem").position().left 另: static(默认):默认定位方式. relative(相对定位):在static的基础上,相对元素本来的位置变化,通过设定top,bo

  • jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标

    获取页面某一元素的绝对X,Y坐标,可以用offset()方法: 复制代码 代码如下: <span style="color:#000066; font-weight:bold">var</span> X <span style="color:#339933">=</span> $<span style="color:#009900">(</span><span styl

  • jQuery 实现DOM元素拖拽交换位置的实例代码

    实现步骤 1.html + bootstrap 布局画3个面板. 注:面板样式 position 属性必须是绝对位置或者相对位置. 2.监听面板的的 mousedown事件. 记录当前对应面板的位置target_index,设置面板透明拖动. 3.监听当前被拖动的面板的mousemove事件. 根据鼠标移动的位置和面板的相对位置计算出面板应该出现的新位置,就将面板位置设置为新位置. 4.监听当前被拖动的面板的mouseup事件. 当松开鼠标时,查看当前鼠标所在位置对应的面板的位置exchange

  • jquery获得页面元素的坐标值实现思路及代码

    jquery如何获得页面元素的坐标值 yulutxt是输入经典语录的输入框,feedBackMessage函数见http://www.wesoho.com/article/asp/2765.htm 复制代码 代码如下: var p = $("#yulutxt"); var yuluoffset = p.offset(); feedBackMessage(msg,yuluoffset.left+p.width()+10,yuluoffset.top,5000); ------------

  • jQuery 判断页面元素是否存在的代码

    例如: 复制代码 代码如下: document.getElementById("someID").innerText("hi"); 如果ID为"someID"的元素不存在,我们将得到Javascript运行错误:document.getElementById("someID") is null 正确的写法应该是: 复制代码 代码如下: obj = document.getElementById("someID&quo

  • jQuery实现动态控制页面元素的方法分析

    jQuery实现动态控制页面元素的方法分析

    本文实例讲述了jQuery实现动态控制页面元素的方法.分享给大家供大家参考,具体如下: 背景 最近做了一个小系统,其中需要在页面对用户的好友进行增删改查.本来没有那么复杂,用表格形式就可以相对容易的实现. 但是考虑到用户的体验度,首先添加尽量不想用输入,就采用将所有用户分类显示,然后点击即可添加. 添加的用户同时在界面显示,显示出用户当前的好友.同时点击已经添加好的好友可进行下一部的业务操作. 当然,删除的操作是仿照手机端那样,右上角有一个红色的"x",点击该好友即可删除. 最后界面还

  • jQuery获取页面及个元素高度、宽度的总结——超实用

    下面把jQuery获取页面及个元素高度.宽度的方法汇总,分享给大家. 获取浏览器显示区域(可视区域)的高度 : 复制代码 代码如下: $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : 复制代码 代码如下: $(window).width(); 获取页面的文档高度 复制代码 代码如下: $(document).height(); 获取页面的文档宽度 : 复制代码 代码如下: $(document).width(); 浏览器当前窗口文档body的高度: 复制代码 代码

  • jQuery使用之处理页面元素用法实例

    本文实例讲述了jQuery使用之处理页面元素用法.分享给大家供大家参考.具体分析如下: 对于页面的元素,在DOM编程中可以通过各种查询.修改手段进行管理,非常麻烦.jQuery提供了一整套的方法来处理页面的元素.包括元素的内容.复制.移动和替换等.这里将介绍一些常用的内容. 1.直接获取.编辑内容. 在jQuery中,主要是通过html()和text()两个方法来获取和编辑页面的内容.其中html()相当于获取节点的innerHTML属性,添加参数html(text),则为设置innerHtml

  • jQuery实现拖拽页面元素并将其保存到cookie的方法

    本文实例讲述了jQuery实现拖拽页面元素并将其保存到cookie的方法.分享给大家供大家参考,具体如下: 实现的效果就是页面内的图片可拖拽到任意位置,并将所在位置保存.下次打开页面依然可见.本文是作demo用,实际开发中,位置的数据应保存到数据库中 好了,开始 1.准备工作 a.jquery(1.7.2),ui,cookie插件,json插件.一些图片(本文是5张) 2.页面 上代码 <div class="img_list" id="img_list"&g

随机推荐