获取/设置标签的位置数据
* 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. python 新手题目-文件读写-关键字判断

    import os import json import re filename ="D:/pytest/2000/100/111.txt" f = open(filename,& ...

  2. python 时间time模块介绍和应用

    1.其中format_string 类型的时间和struct_time之间可以转换,timestamp时间戳可以和struct_time之间进行转化,但是时间戳和格式化时间是不能直接转换的. time ...

  3. 批量复制windows文件夹下所有文件名

    第一步,打开文件夹 第二步,在该文件夹下新建一个txt文件,然后将“.txt”后缀名修改为“.bat” txt文件内容“DIR *.* /B >LIST.TXT” 第三步,双击“.bat”,直接 ...

  4. 20155235 《Java程序设计》 实验五 Java网络编程及安全

    20155235 <Java程序设计> 实验五 Java网络编程及安全 实验内容 1.掌握Socket程序的编写: 2.掌握密码技术的使用: 3.设计安全传输系统. 实验要求 没有Linu ...

  5. 微信小程序解决地图上的层级关系

    在有带地图的手机页面上,view无法显示在地图上方,所以,在wxml中,使用: <cover-view></cover-view> 能使view显示在地图上 注: 在该标签内部 ...

  6. checkpoint process vs writer process vs wal writer process

    开始 我目前的理解是: 如果我执行了一条SQL文,那么 先是相关数据写到  wal buffer里, 然后再写到 data  buffer(shared_buffer)里. 这之后, 由于wal wr ...

  7. CF 987 D. Fair

    D. Fair http://codeforces.com/contest/987/problem/D 题意: n个城镇m条道路,(保证没有重边,两个城镇间可以到达),每个城镇拥有的特产ai(可能多个 ...

  8. macOS 10.14 Mojave Apache设置:多个PHP版本

    [18/6/2018更新]由于Homebrew/php点击在2018年3月底被弃用,并将所有PHP公式移动到Homebrew/core,我们已经重新设计了我们的指南,使用这个新的水龙头. 如果您过去一 ...

  9. Cocoa Touch提供了哪几种Core Animation过渡类型?

    过渡动画通过 type 设置不同的动画效果, CATransition 有多种过渡效果, 但其实 Apple 官方的SDK只提供了四种: fade 淡出 默认 moveIn 覆盖原图 push 推出 ...

  10. 使用phpMyAdmin管理网站数据库(创建、导入、导出…)

    作为一名站长,最重视的就是网站的数据安全了.本节襄阳网站优化就来讲讲如何使用phpMyAdmin管理软件进行mysql数据库的管理,实现基本的数据库管理用户.数据库的创建.数据的导入和导出操作(网站备 ...