源 /php中文网    源 /www.php.cn

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

(视频版请点击本文末尾左下角:阅读原文)

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

代码示例如下:

jquery获取当前元素的位置

*{

margin:0;

padding:0;

}

#box{

width:150px;

height:100px;

background: orange;

margin: 150px 100px;

}

$(function() {

$("button").click(function(){

var offset = $("#box").offset();

alert("盒子的当前位置为: (left: " + offset.left + ", top: " + offset.top + ")");

});

});

获取位置

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

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

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

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

本篇文章就是关于jquery获取当前元素的位置的方法介绍,也很简单,希望对需要的朋友有所帮助!

php获取元素位置,jquery如何获取当前元素的位置相关推荐

  1. jquery append添加的元素用jquery无法获取到

    当获取 $("#art-list")页面元素后去在后面追加标签的时候(append),在下面用 $(selector) 获取刚刚添加的标签,发现怎么都获取不到. 因为页面已经将JS ...

  2. php js获取class,用jquery如何获取类名

    用jquery获取类名的方法:首先使用div标签创建一行文字,给div标签添加一个class属性:然后在js标签内,通过类名获得div对象,使用[attr()]方法获得class类名. 用jquery ...

  3. html 元素响应,jQuery动态添加html元素后,响应事件的问题记录

    var li = " " + "" + // 缩略图 点击部分 index='" + i + "' "" + " ...

  4. html 获取class节点,jquery获取class元素

    jQuery获取div下的所有class元素? 欢迎来到CSS布局HTML. 可以试下map函数 希望对你有帮助. jquery 是如何通过 class 来获取元素的? jquery通过任何选择器取得 ...

  5. js进阶 11-8 jquery如何获取元素相对于父元素的位置

    js进阶 11-8  jquery如何获取元素相对于父元素的位置 一.总结 一句话总结:用jquery的position方法,但是使用这个方法的前提是父元素相对定位,子元素绝对定位,否则和offset ...

  6. 使用html元素的getBoundingClientRect来获取dom元素的时时位置和大小

    使用: var section = $('.section'):这是jquery包装的dom元素,其他前端框架返回的可能也是一个包装元素, 我们需要获得的是里面的html的dom元素 然后:secti ...

  7. jquery如何获取第一个或最后一个子元素?

    jquery如何获取第一个或最后一个子元素?通过children方法,children("input:first-child")$(this).children("inp ...

  8. jquery height 获取不到隐藏元素高度的问题

    今天在写js的时候遇到这样一个场景,页面上有两个tab页,其中有相同的两个div.在切换的时候需要获取该div的高度,然后做相应的判断.结果发现使用$('').height();获取高度的时候,一个可 ...

  9. [jQuery]无法获取隐藏元素(display:none)宽度(width)和高度(height)的新解决方案

    在做茶城网改版工作的时候,又遇到一个新问题,我需要用jQuery写一个通过点击左右图标来翻阅图片的小插件,写好后测试可以正常运行,但是放到Tab中后发现只有第一个Tab中的代码能够正常运行,其它全部罢 ...

最新文章

  1. golang python rpc_grpc - 使用 golang 带你从头撸一套 RPC 服务(一)
  2. 脚本自动配置ssh互信
  3. 【深度学习】神经网络中的蒸馏技术,从Softmax开始说起
  4. 数据库恢复相关知识笔记
  5. UVa 11346 - Probability
  6. 带有Angular JS的Java EE 7 – CRUD,REST,验证–第2部分
  7. [TC SRM 685 div1 lev1] MultiplicationTable2
  8. 制造业ai中台_如何建立自己的制造者工作台
  9. C# Dictionary键值对 创建,增加,删除,清空
  10. linux 记账软件下载,净蓝记账app手机版下载-净蓝记账软件官方版v1.0.02-Linux公社...
  11. Ps“反转负冲”人像处理一例
  12. 无人机大面积航测面临的难点及解决方法
  13. 电脑视频加水印软件哪个好?这些软件值得收藏
  14. 大数据分析R和RStudio使用指南
  15. 【计算机网络】湖科大学习笔记---数据链路层
  16. 分布式是大数据处理的万能药?
  17. 纽约市街道规划设计与治理启示
  18. YOLOV5模型训练之JSON格式的数据集制作,一个py程序搞,搞不定邮件联系,我帮你!!!!
  19. android o 结构光流程,OPPO 3D结构光技术完成,下半年实现量产,O粉们期待吗?
  20. 【测试】软件测试 QA、QC、QM的关系与区别?

热门文章

  1. Exchange Reporter Plus概述
  2. 分布式文件系统-HDFS(   HDFS全称是Hadoop Distributed System)
  3. Kubernetes 学习总结(19)—— Kubernetes 集群管理平台如何选择?Rancher vs KubeSphere
  4. Mysql学习总结(85)——开发人员最应该明白的数据库设计原则
  5. Maven学习总结(39)——Maven私服的搭建及使用deploy命令部署构建问题汇总
  6. Maven学习总结(31)——Maven坐标详解
  7. linux根目录被mv,【Linux】mv根目录的恢复(转)
  8. php cli获取参数,php cli模式下获取参数的方法
  9. 一张图明白jenkins和docker作用
  10. 播客“日谈公园”完成数百万天使轮融资,来自头头是道基金