获取/设置标签的位置数据
* 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的更多相关文章

  1. js中的offsetParent,offsetLeft,offsetTop及jquery的offset(),position()比较

    1.offsetParent 元素的offsetParent并不是元素的父元素,判断元素的offsetParent要根据以下情况: 1)当DOM结构层次中的元素均没有进行css定位(设置positio ...

  2. 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 ...

  3. jquery的offset().top和js的offsetTop的区别,以及jquery的offset().top的实现方法

    jquery的offset().top和js的offsetTop的区别,以及jquery的offset().top的实现方法 offset().top是JQ的方法,需要引入JQ才能使用,它获取的是你绑 ...

  4. 深度理解Jquery 中 offset() 方法

    参考原文:深度理解Jquery 中 offset() 方法

  5. Jquery中用offset().top和offsetTop的比较

    今天,想测试一个div与顶部的距离,用的是.offsetTop,但是offsetTop获得的值,怎么都打印不出来.折腾了半天,打印的结果都是undefined,虽然网上很多资料都说返回的是数值.虽然这 ...

  6. jquery 获取css position的值

      jquery 获取css position的值 CreateTime--2018年5月28日14:03:12 Author:Marydon 1.情景展示 <div id="aa&q ...

  7. js实现jquery的offset()

    用过jQuery的offset()的同学都知道 offset().top或offset().left很方便地取得元素相对于整个页面的偏移. 而在js里,没有这样直接的方法,节点的属性offsetTop ...

  8. jquery的offset().top 和position().top 详解 和如何用js实现

    1 jquery定义: offset().top 相对于当前文档的坐标(的高度) ps:包括滚动条卷去的高度 position().top 返回的是相对于其定位的祖辈元素的坐标(的高度) ps:包括滚 ...

  9. jQuery的offset、position、scroll,元素尺寸、对象过滤、查找、文档处理

    jQuery_offset和position var offset = $('.xxx').offset() console.log(offset.left.,offset.top)xxx相对于页面左 ...

随机推荐

  1. 面试被问到SPI总结

    SPI驱动框架 枚举过程 drivers/spi/spi.c: spi_register_board_info /* 对于每一个spi_master,调用spi_match_master_to_boa ...

  2. 笔记(assert 断言)

    并发:在同一个时间段交替执行多个任务并行:在同一个时间点同时执行多个任务串行:同时执行的多个任务按顺序执行(换句话说就是一个任务执行完后才能执行下一个任务) #mysql limit用法: selec ...

  3. Ambari搭建hadoop错误记录

    1.ResourceManager启动失败 错误如下 2019-03-24 19:57:00,607 - Error while executing command 'start': Tracebac ...

  4. IDEA下安装与使用Junit4

    安装Junit4 打开File->Settings->Plugins,单击下图所示按钮 搜索JunitGeneratorV2.0并安装 重启IDEA 打开File->Project ...

  5. # 20155224 课堂实践 MyOD

    20155224 课堂实践 MyOD 要求 编写MyOD.java 用java MyOD XXX实现Linux下od -tx -tc XXX的功能 提交测试代码和运行结果截图,加上学号水印,提交码云代 ...

  6. 20155233 《Java程序设计》第十二周课堂练习总结

    20155233 <Java程序设计> 第十二周课堂练习总结 测试题目 1.修改教材P98 Score2.java, 让执行结果数组填充是自己的学号:提交在IDEA或命令行中运行结查截图, ...

  7. 【CS】知识索引汇总

    Chapter 7 hello.o -> hello (链接) 一.静态链接 主要是将符号对应起来 两个主要任务:符号解析(符号引用与符号定义的对应).重定位(符号定义与内存位置的对应) 1. ...

  8. 20155336 2016-2017-2《JAVA程序设计》第一周学习总结

    # 20155336  2016-2017-2<JAVA程序设计>第1周学习总结 ## 教材学习内容总结 开学的第一周,带着些许的欣喜和好奇,听完了老师的第一堂课.说心里话学习JAVA仿佛 ...

  9. 20155338 2016-2017-2 《Java程序设计》第九周学习总结

    20155338 2016-2017-2 <Java程序设计>第九周学习总结 教材学习内容总结 第十六章 整合数据库 JDBC入门 · 数据库本身是个独立运行的应用程序 · 撰写应用程序是 ...

  10. 无法获得锁 /var/lib/apt/lists/lock - open (11 资源临时不可用)

    具体如下: 1.ps-aux 查出apt-get进程的PID,通常是一个四位数字. 2.用sudo kill PID代码 杀死进程 3.用sudo apt-get update,sudo apt-ge ...