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开始计数. 如果不给 ...
随机推荐
- JAVA-用HttpClient来模拟浏览器GET,POST
一般的情况下我们都是使用IE或者Navigator浏览器来访问一个WEB服务器,用来浏览页面查看信息或者提交一些数据等等.所访问的这些页面有的仅仅是一些普通的页面,有的需要用户登录后方可使用,或者需要 ...
- [Training Video - 4] [Selenium IDE]
Selenium IDE Training List
- 用U盘安装Ubuntu主系统
用U盘安装Ubuntu主系统 0. 学习Ubuntu系统的的动机 ubuntu系统的内核是linux系统,通过Ubuntu的学习,掌握lInux服务器搭建!!!! 硬件要求:闲置的笔记本 + U盘 ...
- 企业搜索引擎开发之连接器connector（二十八）
通常一个SnapshotRepository仓库对象对应一个DocumentSnapshotRepositoryMonitor监视器对象,同时也对应一个快照存储器对象,它们的关联是通过监视器管理对象D ...
- Delphi 自带的字符串分割函数split
下面介绍Delphi自带的字符串分割函数,根据你的需要来使用. 1.ExtractStrings function ExtractStrings(Separators, WhiteSpace: TSy ...
- solr-4.10.2版本使用tomcat7部署
当前版本仅限于solr-4.10.2版本.默认环境使用的是jdk1.7,tomcat7.环境自己配置.网上一堆堆的. 1.下载相应的文件(solr-4.10.2.zip). 官网地址:http://l ...
- Linux TCP不同状态的连接数统计
方法一:利用netstat命令 统计 TIME_WAIT/CLOSE_WAIT/ESTABLISHED/LISTEN 等TCP状态的连接数 netstat -tan |grep ^tcp |awk ' ...
- rpm包的安装，查询，卸载，升级，校验，数据库重建，验证数据包
rpm命名: 包:组成部分 主包:bind-9.7.1-1.i586.e15.rpm 子包:bind-lib-9.7.1-1.i586.e15.rpm bind-utils-9.7.1-1.i586. ...
- 跨域处理之Jsonp
一.认识Jsonp JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式 ...
- 如何实现一个IOS网络监控组件
此文由作者朱志强授权网易云社区发布. Mobile Application Monitor IOS组件设计技术分享 背景 应用程序性能管理Application Performance Managem ...