jquery如何获取当前元素的位置?

jquery获取当前元素的位置,并且是相对于文档的位置。我们可以使用jQuery offset()方法来实现。offset()方法仅适用于可见元素。

5c1b4d362bd43822.jpg

下面我们结合简单的代码,给大家介绍jquery获取当前元素的位置的方法。

代码示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery获取当前元素的位置</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
    #box{
        width:150px;
        height:100px;
        background: orange;
        margin: 150px 100px;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $(function() {
        $("button").click(function(){
            var offset = $("#box").offset();
            alert("盒子的当前位置为: (left: " + offset.left + ", top: " + offset.top + ")");
        });
    });
</script>
</head>
<body>
    <button type="button">获取位置</button>
   
</body>
</html>

offset() 方法返回或设置匹配元素相对于文档的偏移(位置)。

该.offset()方法允许我们检索相对于文档的元素的当前位置(特别是其边界框,其排除边距)。与此对比.position(),它检索相对于偏移父项的当前位置。将新元素放置在现有元素之上进行全局操作(特别是实现拖放)时.offset()更有用。

.offset()返回包含属性top和的对象left。

获取当前元素的位置,结果如下:

2.gif

Image placeholder
前端答疑
未设置
  56人点赞

没有讨论,发表一下自己的看法吧

推荐文章
jquery如何获取html元素的内容?

jquery如何获取html元素的内容?一、text():设置或返回所选元素的文本内容文本信息 $('#p').text();//文本信息 $('#p').text('新的文本');二、html()

jquery如何获取隐藏元素的高度?

jquery如何获取隐藏元素的高度?jquery获取隐藏元素的高度可以直接使用height()方法。例如: #app{ width:100px; height:1000px; display:no

是什么能让 APP 快速精准定位到我们的位置?

本文作者:smallyang,腾讯IEG开发工程师什么是geohash?它的原理是什么?它帮助我们解决了哪些痛点,本文为你娓娓道来。本文包含以下内容,阅读完需要约10分钟:我们日常生活中遇到哪些定位的

jquery如何判断元素是否存在?

jquery如何判断元素是否存在?jquery使用$(selector)方法查找dom元素,返回的是一个jquery对象,具有length属性。length即找到的dom元素个数,只需判断length

jquery如何判断元素内容是否为空?

jquery如何判断元素内容是否为空?下面提供了两种方法用于检查指定id的元素的内容是否为空,当然了,不仅仅适用于指定了id的元素,同样适用于其他元素,只需要改变选择器即可。一、使用html()方法获

jquery如何显示和隐藏元素?

jquery如何显示和隐藏元素?JQ中显示隐藏元素有这几种方式show()、hide()、toggle()、slideDown(),以及使用css方法设置display属性。1、show()方法显示出

jquery如何添加元素?

jquery如何添加元素?添加元素可以使用append()、prepend()、after()、before()、appendTo()方法。1、append()方法:在被选元素的结尾插入元素或内容2、

jquery如何删除元素?

jquery如何删除元素?如需删除元素和内容,一般可使用以下两个jQuery方法:●remove()-删除被选元素(及其子元素)●empty()-从被选元素中删除子元素1、remove()方法:删除被

jquery如何设置元素不可点击?

jquery如何设置元素不可点击?jquery设置表单元素不可点击可以使用attr()方法,给它们加上readonly、disabled属性。设置其他元素不可点击,可以使用css()方法,设置它们的p

jQuery如何选择以特定字符开头的ID元素?

jQuery如何选择以特定字符开头的ID元素?jquery选择器中选取以特定字符开头的元素可以使用$('element[attr^=特定字符]')方法。例如选取p元素中id以abc开头的元素。(相关课

jquery如何判断元素是否在数组中?

要判断数组中是否包含某个元素,从原理来来说,就是遍历整个数组,然后判断是否相等。可以使用Jquery提供的方法:$.inArray("元素(字符串)",数组名称)进行判断,当存在该元素(字符串)时,返

jQuery如何按name属性选择元素?

方法1:使用name属性选择器name属性选择器可用于按name属性选择元素。此选择器选择值与指定值完全相等的元素。语法:[name=“nameOfElement”]示例:输出:方法2:使用javas

css如何设置元素不显示仅占位置?

css如何设置元素不显示仅占位置?隐藏页面元素可以使用visibility:hidden属性,它将元素设置为不可见,并且占据原来的位置,不能响应点击事件。不可见 .hide{ visibility:

jquery如何判断对象是否获取焦点?

jquery如何判断对象是否获取焦点?jquery判断对象获取焦点可以使用$(selector).is(":focus")。当对象具有焦点时返回为true,否则返回为false。语法:$(select

jquery和jquery ui的区别?

jquery和jqueryui的区别?区别有:1、jQuery是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等。 2、jQueryUI则是在jQuery的基础上,利用jQuery的扩展性,

jQuery怎样获取同级元素?

jQuery怎样获取同级元素?在jquery中,获得同级元素的方法一般有七个,分别是siblings()、next()、nextAll()、nextUntil()、prev()、prevAll()、p

jquery怎么获取第几个元素?

在jquery中,可以使用eq()方法找到第几个元素或第N个元素,jquery中eq()的使用如下:eq()选择器选取带有指定index值的元素。index值从0开始,所有第一个元素的index值是0

jquery如何判断是否是对象?

jquery如何判断是否是对象?jquery提供了isPlainObject方法来判断一个变量是否是对象类型,返回值为Boolean类型。例子:varobj={a:1}; vararr=[1,2];

jquery如何判断是否是数组?

jquery如何判断是否是数组?jquery提供了isArray方法来判断一个变量是否是数组类型,返回值为Boolean类型。例子:varobj={a:1}; vararr=[1,2]; varbo

jquery如何判断对象是否存在?

jquery如何判断对象是否存在?一、jQuery判断对象是否存在1、方法一在jQuery中,varobj=$("#id")无论id这个控件是否存在,都是返回object,所以需要通过length来判

jquery如何判断图片是否加载完成?

对于图片的处理,例如幻灯片播放、缩放等,都是依赖于在所有图片完成之后再进行操作。今天来看下如何判断所有的图片加载完成,而在加载完成之前可以使用loading的gif图表示正在加载中。一、普通方法监听i

jquery如何判断属性是否存在?

jquery如何判断属性是否存在?jquery判断属性存在可以使用attr()方法、is()方法、filter()方法,以及原生js的hasAttribute()方法。1、使用attr()获取属性,检

jquery如何判断值是否是url地址?

jquery如何判断值是否是url地址?思路:1、创建一个输入框,使用jquery给它注册change事件;2、创建一个函数checkUrl,传入一个url参数;3、函数内编写一条检测url正确性的正

jquery如何判断是否是ie浏览器?

jquery如何判断是否是ie浏览器?在写页面的时候,会遇到浏览器兼容问题,在这个浏览器中可以使用,但在其他浏览器中却不能很好的显示。以下就是判断浏览器的方法,从而更好的区分代码,使得页面正常浏览。f

jquery如何进行字母大小写转换?

jquery如何进行字母大小写转换?1、大写转小写$('#in').val().toLowerCase()2、小写转大写$('#in').val().toUpperCase()使用案例:输入框失去焦点

{