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开始计数. 如果不给 ...
随机推荐
- What's App has the Qt?
收集了我看到的使用Qt开发的应用程序或者含有Qt库的应用程序 CNTV CNTV, 一个中央电视台的视频直播软件, 从下面卸载后的残余目录树,可以看到,存在部分库使用的就是Qt的.下面的目录树,已经删 ...
- springMVC框架介绍以及运行流程（图解）
1 Springmvc是什么? spring web mvc和struts2都属于表现层的框架,spring web mvc是spring框架的一部分(所以spring mvc与spring之间不需要 ...
- [Training Video - 1] [Selenium Basics] [Install Selenium IDE]
Download and Install Selenium IDE
- Greeplum 系列（七） 权限管理
Greeplum 系列(七) 权限管理 一.角色管理 Role 分为用户(User)和组(Group),用户有 login 权限,组用来管理用户,一般不会有 login 权限.初始化 gp 时创建了一 ...
- oj1089-1096总结（输入输出练习）
//无限输出类 #include<stdio.h>int main(void){ int a,b; while((scanf("%d %d",&a,&b ...
- Hadoop-2.7.2分布式安装手册
目录 目录 1 1. 前言 3 2. 特性介绍 3 3. 部署 5 3.1. 机器列表 5 3.2. 主机名 5 3.2.1. 临时修改主机名 6 3.2.2. 永久修改主机名 6 3.3. 免密码登 ...
- TogetherJS本地部署，基于websocket的网页即时视频、语音、文字聊天
TogetherJS分为两大部分,一个是hu文件夹中的服务端:另外一个是TogetherJS文件夹中的Together.JS文件,包含了所有的网页文字.语音等操作. 需要预先安装Node.js,可以百 ...
- 工作中经常打交道的Java代码の容器（一）
- python, C++, C# 计算速度简单对比
有个简单的运算, ; ; ; i < n ; i ++) { ; j < n; j ++) { lResult += (ulong) ( i * j ); } } return lResu ...
- C#学习（2）：委托
1.疑问: 1.委托是什么? 2.为什么需要委托? 3.委托能用来做什么? 4.如何自定义委托? 5..NET默认的委托类型有哪几种? 6.怎样使用委托? 7.多播委托是什么? 8什么是泛型委托? 9 ...