jQuery 获取元素当前位置offset()与position()
<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 400px;
height: 400px;
background-color: pink;
position: relative;
margin: 100px;
}
.son {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () { //获取元素的相对于document的位置
console.log($(".son").offset());
console.log($(".son").offset().left);
console.log($(".son").offset().top);
//设置元素的left和top
$(".son").offset({
left: 300,
top: 300
})
//函数方式的去设置
$(".son").offset(function (v, i) {
var a = {};
a.left = 400;
a.top = 400;
return a;
})
//获取元素相对于有定位的父元素的位置
console.log($(".son").position());
console.log($(".son").position().left);
console.log($(".son").position().top);
});
</script>
</body>
</html>
jQuery 获取元素当前位置offset()与position()的更多相关文章
- Jquery获取元素的位置
$(".curr_play").position().left //元素距离父级元素左侧位置 $(".curr_play").offset().left //元 ...
- jQuery获得元素位置offset()和position()的区别
jQuery获得元素位置offset()和position()的区别 jQuery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同 offset(): 获取 ...
- jquery获取元素在文档中的位置信息以及滚动条位置（转）
jquery获取元素在文档中的位置信息以及滚动条位置 http://blog.csdn.net/qq_34095777/article/details/78750886 原文链接 原创 201 ...
- jquery 获取元素在浏览器中的绝对位置
代码详解 1,获取对象(自定义调整打开新窗口参照元素) var obj = $("#oButton"); 实例中我获取的对象是弹出窗口按钮,这样创建的新窗口就会根椐按钮的位置进行调 ...
- [转载]jquery获取元素索引值index()方法：
jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的 ...
- jquery获取元素索引值index()方法
jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的 ...
- jquery获取元素到屏幕底的可视距离
jquery获取元素到屏幕底的可视距离 要打对号的图里的height(我自称为可视高度:滚动条未滑到最底端) 不是打叉图里的到页面底部(滚动条到最底部时的height)(offset().top方法 ...
- jquery获取元素到页面顶部距离
jquery获取元素到页面顶部距离的语句为: $(selector).offset().top
- jquery获取元素索引值index()
jquery获取元素索引值index()方法实例. jquery获取元素索引值index()方法: jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 ...
随机推荐
- change qt version
https://blog.csdn.net/xiaoheibaqi/article/details/50777203 右键工程->设置qt project setting -->修改ver ...
- 添加普通用户为sudo用户
https://www.linuxidc.com/Linux/2017-01/139361.htm 1.打开sudoers文件 切换到root用户下,cd root,运行visudo命令,visudo ...
- 玩转Sketch，不容错过的5大实用插件推荐
在之前的文章中,笔者为大家介绍了Sketch 的入门教程.实用技巧和资源集锦,相信大家对Sketch已经有了初步的了解和认识.除了基础的矢量设计功能以外,插件更是让Sketch保持强大的独门秘籍.Sk ...
- 一起做RGB-D SLAM (6)
第六讲 图优化工具g2o的入门 2016.11 更新 把原文的SIFT替换成了ORB,这样你可以在没有nonfree模块下使用本程序了. OpenCV可以使用 apt-get install libo ...
- 统计学中z分布、t分布、F分布及χ^2分布
Z就是正态分布,X^2分布是一个正态分布的平方,t分布是一个正态分布除以(一个X^2分布除以它的自由度然后开根号),F分布是两个卡方分布分布除以他们各自的自由度再相除 比如X是一个Z分布,Y(n)=X ...
- C#使用Log4Net记录日志（转）
出处:http://www.cnblogs.com/wangsaiming/archive/2013/01/11/2856253.html 第一步:下载Log4Net 下载地址:http://logg ...
- edis.clients.jedis.exceptions.JedisDataException: MISCONF Redis is configured to save RDB snapshots,
edis.clients.jedis.exceptions.JedisDataException: MISCONF Redis is configured to save RDB snapshots ...
- (二分搜索)Can you solve this equation? -- hdu -- 2199
链接: http://acm.hdu.edu.cn/showproblem.php?pid=2199 Time Limit: 2000/1000 MS (Java/Others) Memory ...
- （深搜）棋盘问题 -- poj -- 1321
链接: http://poj.org/problem?id=1321 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 2889 ...
- Ansible运维自动化工具
1>Ansible 1>ansible简介 ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.cfengine.chef.func.fabri ...