获取/设置标签的位置数据
* 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. 小白该如何学习Linux操作系统

    一. 选择适合自己的Linux发行版 谈到linux的发行版别,太多了,可能谁也不能给出一个准确的数字,但是有一点是能够必定的,linux正在变得越来越盛行, 面临这么多的Linux 发行版,打算从别 ...

  2. 创建自定义view(翻译 androidtraining)

    创建自定义view 一个设计良好的的自定义view应该是一个设计良好的class,它包含了很多实用的功能,让人们更加容易使用接口.它充分利用GPU与内存的性能等等. 另外作为一个设计良好的类,一个自定 ...

  3. XAMPP之Mysql启动失败

    启动XAMPP中的Mysql出现如下: 可能的原因是本地有多个MySQL,所以要在注册表编辑器中将imagePath改成XAMPP中的mysql的地址.(打开注册表编辑器:win+R,输入regedi ...

  4. linux c makefile

    unio : unio.c gcc unio.c -o unio run:  ./unio 上面有错.必须强制按照规则来: 目标体:依赖文件 命令 命令必在目标体的下一行,且要加TAB键,必须必须. ...

  5. 20155232 实验二《Java面向对象程序设计》实验报告

    20155232 实验一<Java面向对象程序设计>实验报告 实验内容 1.初步掌握单元测试和TDD 2.理解并掌握面向对象三要素:封装.继承.多态 3.初步掌握UML建模 4.熟悉S.O ...

  6. 20155322 2016-2017-2 《Java程序设计》第2周学习总结

    20155322 2016-2017-2 <Java程序设计>第2周学习总结 教材学习内容总结 本周按照教学安排学习教材的第三章,下面简单的概括一下我的学习总结: 第三章的主要内容是有关于 ...

  7. 20145207《Java程序设计》实验一(Java开发环境的熟悉)实验报告

    <Java 程序设计>实验一(Java开发环境的熟悉)实验报告 目录 改变 Java开发环境的熟悉实验要求 实验成果 课后思考 改变 修改了之前仅仅是贴了图片,连代码都没粘的状态.增加了自 ...

  8. day 6 返回值,参数

    1.函数返回值 In [3]: def divid(a,b): ...: shang = a//b ...: yushu = a%b ...: return shang,yushu ...: In [ ...

  9. CF 959 E. Mahmoud and Ehab and the xor-MST

    E. Mahmoud and Ehab and the xor-MST https://codeforces.com/contest/959/problem/E 分析: 每个点x应该和x ^ lowb ...

  10. 1071: [SCOI2007]组队

    1071: [SCOI2007]组队 https://lydsy.com/JudgeOnline/problem.php?id=1071 分析: dp+单调性. A*(hi–minH)+B*(si–m ...