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相对于页面左 ...
随机推荐
- Java学习笔记三十一:Java 包(package)
Java 包(package) 一:包的作用: 如果我们在使用eclipse等工具创建Java工程的时候,经常会创建包,那么,这个包是什么呢. 为了更好地组织类,Java 提供了包机制,用于区别类名的 ...
- 笔记(assert 断言)
并发:在同一个时间段交替执行多个任务并行:在同一个时间点同时执行多个任务串行:同时执行的多个任务按顺序执行(换句话说就是一个任务执行完后才能执行下一个任务) #mysql limit用法: selec ...
- ASP.NET Core 资源打包与压缩
ASP.NET Core 资源打包与压缩 在ASP.NET 中可以使用打包与压缩来提高Web应用程序页面加载的性能. 打包是将多个文件(CSS,JS等资源文件)合并或打包到单个文件.文件合并可减少We ...
- 20155206 2016-2017-2 《JAVA程序设计》 第二周学习总结
20155206 2016-2017-2<JAVA程序设计>第二周学习总结 教材学习内容总结 类型 整数 字节 浮点数 字符 布尔 变量 变量在命名时,不可以使用数字或一些特殊字符:*.& ...
- 20155233 《Java程序设计》 第十一周课堂练习总结
20155233 <Java程序设计> 第十一周课堂练习总结 测试题目 1.修改教材P74 一行代码 NineNineTable.java, 让执行结果是个三角形: 提交在IDEA或命令行 ...
- Linux系统基础网络配置老鸟精华篇
对于linux高手看似简单的网络配置问题,也许要说出所以然来也并不轻松,因此仍然有太多的初学者徘徊在门外就不奇怪了,这里,老男孩老师花了一些时间总结了这个文档小结,也还不够完善,欢迎大家补充,交流.谢 ...
- 《Node.js 包教不包会》
<Node.js 包教不包会> 为何写作此课程 在 CNode(https://cnodejs.org/) 混了那么久,解答了不少 Node.js 初学者们的问题.回头想想,那些问题所需要 ...
- Unity FSM 有限状态机
翻译了一下unity wiki上对于有限状态机的案例,等有空时在详细写一下.在场景中添加两个游戏物体,一个为玩家并修改其Tag为Player,另一个为NPC为其添加NPCControl脚本,并为其将玩 ...
- 如何通俗理解贝叶斯推断与beta分布?
有一枚硬币(不知道它是否公平),假如抛了三次,三次都是“花”: 能够说明它两面都是“花”吗? 1 贝叶斯推断 按照传统的算法,抛了三次得到三次“花”,那么“花”的概率应该是: 但是抛三次实在太少了,完 ...
- kafka可靠性
文章转载自: http://blog.csdn.net/u013256816/article/details/71091774