jQuery之offset,position
获取/设置标签的位置数据
* offset(): 相对页面左上角的坐标
* position(): 相对于父元素左上角的坐标.
需求:
1. 点击 btn1
打印 div1 相对于页面左上角的位置
打印 div2 相对于页面左上角的位置
打印 div1 相对于父元素左上角的位置
打印 div2 相对于父元素左上角的位置
2. 点击 btn2
设置 div2 相对于页面的左上角的位置
代码实现:
//1. 点击 btn1
$("#btn1").click(function(){
// 打印 div1 相对于页面左上角的位置 10 20
var offet = $(".div1").offset();
console.log("left:"+offet.left+",top:"+offet.top);
// 打印 div2 相对于页面左上角的位置 10 70
var offet2 = $(".div2").offset();
console.log("left:"+offet2.left+",top:"+offet2.top); // 打印 div1 相对于父元素左上角的位置 10 20
var position = $(".div1").position();
console.log("left:"+position.left+",top:"+position.top);
// 打印 div2 相对于父元素左上角的位置 0 50
var position = $(".div2").position();
console.log("left:"+position.left+",top:"+position.top); });
///2. 点击 btn2
$("#btn2").click(function(){
//设置 div2 相对于页面的左上角的位置
$(".div2").offset({
left:50,
top:70
})
})
jQuery之offset,position的更多相关文章
- js中的offsetParent,offsetLeft,offsetTop及jquery的offset(),position()比较
1.offsetParent 元素的offsetParent并不是元素的父元素,判断元素的offsetParent要根据以下情况: 1)当DOM结构层次中的元素均没有进行css定位(设置positio ...
- pageX/Y, offset(), position(), scrollTop(), screenX/Y, clientX/Y, pageX/Y
event.pageX get mouse position Description: The mouse position relative to the left edge of the docu ...
- jquery的offset().top和js的offsetTop的区别,以及jquery的offset().top的实现方法
jquery的offset().top和js的offsetTop的区别,以及jquery的offset().top的实现方法 offset().top是JQ的方法,需要引入JQ才能使用,它获取的是你绑 ...
- 深度理解Jquery 中 offset() 方法
参考原文:深度理解Jquery 中 offset() 方法
- Jquery中用offset().top和offsetTop的比较
今天,想测试一个div与顶部的距离,用的是.offsetTop,但是offsetTop获得的值,怎么都打印不出来.折腾了半天,打印的结果都是undefined,虽然网上很多资料都说返回的是数值.虽然这 ...
- jquery 获取css position的值
jquery 获取css position的值 CreateTime--2018年5月28日14:03:12 Author:Marydon 1.情景展示 <div id="aa&q ...
- js实现jquery的offset()
用过jQuery的offset()的同学都知道 offset().top或offset().left很方便地取得元素相对于整个页面的偏移. 而在js里,没有这样直接的方法,节点的属性offsetTop ...
- jquery的offset().top 和position().top 详解 和如何用js实现
1 jquery定义: offset().top 相对于当前文档的坐标(的高度) ps:包括滚动条卷去的高度 position().top 返回的是相对于其定位的祖辈元素的坐标(的高度) ps:包括滚 ...
- jQuery的offset、position、scroll,元素尺寸、对象过滤、查找、文档处理
jQuery_offset和position var offset = $('.xxx').offset() console.log(offset.left.,offset.top)xxx相对于页面左 ...
随机推荐
- centos6.8安装mysql过程
1.验证Centos是否安装MySQL $>yum list installed | grep mysql 2.删除MySql $>yum –y remove mysql-libs.X86 ...
- KKT原理以及SVM数学的理论推导分析
一直很好奇机器学习实战中的SVM优化部分的数学运算式是如何得出的,如何转化成了含有内积的运算式,今天上了一节课有了让我很深的启发,也明白了数学表达式推导的全过程. 对于一个SVM问题,优化的关键在于 ...
- wechall MySQL Authentication Bypass II
首先看看源码 username password分开来验证.但是没做过滤 通常的利用方法是使用union构造已知MD5值的查询. 如果username存在则执行查询,并且为admin.我们用unnio ...
- DVWA:环境搭建
0x01 安装PHP集成环境 我这里用的是phpstudy 2016,这个使用起来比较方便.下面是现在的最新版. http://www.phpstudy.net/phpstudy/phpStudy20 ...
- Java ThreadLocal 源代码分析
Java ThreadLocal 之前在写SSM项目的时候使用过一个叫PageHelper的插件 可以自动完成分页而不用手动写SQL limit 用起来大概是这样的 最开始的时候觉得很困惑,因为直接使 ...
- (杭电 2054)A==B?(这真是个巨坑)
A == B ? Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
- 20155233 实验一 Java开发环境的熟悉(Linux + IDEA)
20155233 实验一 Java开发环境的熟悉(Linux + IDEA) 实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用IDEA编辑.编译.运行.调试Java程序. 实验步骤 ( ...
- 20155301 《Java程序设计》实验一(Java开发环境的熟悉)实验报告
20155301 <Java程序设计>实验一(Java开发环境的熟悉)实验报告 一.实验内容及步骤 (一)使用JDK编译.运行简单的java程序 命令行下的程序开发 步骤:打开cmd,建立 ...
- CentOS 6.8 curl支持的NSS修改为OpenSSL的方法
在CentOS 6.8的系统里面的curl支持的https是nss版本的,而不是openssl,所以在php使用curl访问https的时候会报Unable to load client key -8 ...
- GlusterFS学习之路(三)客户端挂载和管理GlusterFS卷
一.客户端挂载 可以使用Gluster Native Client方法在GNU / Linux客户端中实现高并发性,性能和透明故障转移.可以使用NFS v3访问gluster卷.已经对GNU / Li ...