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相对于页面左 ...
随机推荐
- 大数据学习之Hadoop运行模式
一.Hadoop运行模式 (1)本地模式(默认模式): 不需要启用单独进程,直接可以运行,测试和开发时使用. (2)伪分布式模式: 等同于完全分布式,只有一个节点. (3)完全分布式模式: 多个节点一 ...
- C语言中const有什么用途
自己上网查的资料. 可以定义const常量,具有不可变性.例如:const int Max=100; Max++会产生错误; 便于进行类型检查,使编译器对处理内容有更多了解,消除了一些隐患.例如: v ...
- Mysql Explain的简单使用
Mysql Explain 主要重要的字段有上面红色方框圈出来的那几个. type: 连接类型,一个好的SQL语句至少要达到range级别,杜绝出现all级别. key: 使用到的索引名,如果没有选择 ...
- 201552-53 《Java程序设计》第三周问题汇总
201552-53 <Java程序设计>第三周问题汇总 1. 4.2 基本类型打包器理解不是很好,希望老师讲解一下. 2.vim中怎么用"yyp"复制上一行代码 在按E ...
- 2017-2018-1 20155306 20155315 《信息安全技术》实验二、Windows口令破解
在网络界,攻击事件发生的频率越来越高,其中相当多的都是由于网站密码泄露的缘故,或是人为因素导致,或是口令遭到破解,所以从某种角度而言,密码的安全问题不仅仅是技术上的问题,更主要的是人的安全意识问题. ...
- #20155327 2016-2017-2 《Java程序设计》第三周学习总结
20155327 2016-2017-2 <Java程序设计>第三周学习总结 教材学习内容总结 一.三种重要的数字表示 无符号:编码基于传统的二进制表示法,表示大于或者等于零的数字. 补码 ...
- C# 远程图片下载到本地
下载方法 using System; using System.Net; using System.IO; using System.Text; namespace Common { /// < ...
- js文件上传库
收集了2个与具体UI库和框架无任何耦合的JS文件上传库:支持断点续传.支持npm安装. resumable.js fileapi
- Windows环境下php开启GD库的方法
一.GD库是什么? GD库是php处理图形的扩展库,GD库提供了一系列用来处理图片的API,使用GD库可以处理图片,或者生成图片,也可以给图片加水印.在网站上GD库通常用来生成缩略图,或者用来对图片加 ...
- .NET工程师 技能清单
第一次写博客,先说自己对自己的职业定位.NET全栈跨语言工程师 .首先说明自己是微软的狂热粉丝,几乎所有技术都在.NET下进行. 接下来对微软目前的.NET上的技术进行进一步了解,列出一个清单或者说是 ...