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相对于页面左 ...
随机推荐
- python最新笔试题
这是笔者面试小十家公司后呕心沥血总结的一些笔试编程题~具体公司就不透露了.哎,说多了都是泪啊. 1.二分法查找: l = [1, 2, 3, 4, 5, 6, 7, 8, 9] find_num = ...
- 开了几天的phpmyadmin的总结
近来无事,免费体验了一波腾讯云的vps,打了一个phpstudy,全部默认的配置,只不过,没有给他写入文件的权限 开启了日志,看了下,这几天黑客们的活动 首先,有两三个ip来爆破我的phpmyadmi ...
- 第一节 如何用Go实现单链表
一.概念介绍 下面这副图是我们单链表运煤车队. 每节运煤车就是单链表里的元素,每节车厢里的煤炭就是元素中保存的数据.前后车通过锁链相连,作为单链表运煤车,从1号车厢开始,每节车厢都知道后面拉着哪一节车 ...
- C语言中while语句里使用scanf的技巧
今天友人和我讨论了一段代码,是HDU的OJ上一道题目的解,代码如下 #include<stdio.h> { int a,b; while(~scanf("%d%d",& ...
- 关于 idea 快捷键 alt + f7 无法使用的一些尝试
1. 概述 问题 使用 idea 时, 快捷键 alt + f7 无法生效 环境 OS: win10 idea: idea 2018.1.5 GeForce Experience: 3.17.0.12 ...
- 2017-2018-1 20155308&20155321&20155330《信息安全技术》实验三——数字证书应用1
2017-2018-1 20155308&20155321&20155330<信息安全技术>实验三--数字证书应用1 实验目的 了解PKI体系 了解用户进行证书申请和CA颁 ...
- 记Thinkpad的一次扩容升级经历
俗话说:" 工欲善其事,必先利其器" 阅读目录: 背景 目标 准备 友情提示 制作引导盘 分区及备份 拆机装盘 重装系统 写在结束的 参考资料 背景: 作为一个近六年的IT从业Co ...
- Jmeter使用HTTP代理服务器录制脚本
使用Jmeter录制脚本通常使用Badboy工具录制或者Jmeter自带的HTTP代理服务器录制脚本,这里说一下使用HTTP代理服务器录制时遇到的问题. 1. Jmeter安装 下载得到Jmeter ...
- jenkins升级为2.134
由于前面装的jenkins版本为2.130版本,昨天(2018.7.26)发现了两个jenkins的漏洞,影响范围为:Jenkins weekly 2.132 以及更早的版本.Jenkins LTS ...
- Atom 插件 Sync Settings 备份与恢复
当使用 Atom IDEA.随着使用的越来越多,安装的插件也越来越多,一旦电脑重装后需要复原开发环境,这将是一件比较头疼的事.「Sync Settings」插件可以帮助我们解决这个问题. 操作流程 安 ...