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开始计数. 如果不给 ...
随机推荐
- 一些json在js和c++ jsoncpp的操作
1.对于javascript部分,如果将字符串转为json对象? var aa ={ keyword:"zoumm", requestcount:"5", ne ...
- Java 设计模式系列（十五）观察者模式(Observer)
Java 设计模式系列(十五)观察者模式(Observer) Java 设计模式系列目录(https://www.cnblogs.com/binarylei/p/10198698.html) Java ...
- Socket发送文件
.Net.cs using System; using System.Collections.Generic; using System.IO; using System.Linq; using Sy ...
- 构建搞性能可扩展asp.net网站文摘
第1章 原则与方法 网页加载的过程: 关注感知性能,减少阻塞调用,减少往返,在所有架构层次采用缓存,优化硬盘I/O 了解浏览器的工作方式,使用ajax,silverlight和纯javascript避 ...
- [转]How do I run msbuild from the command line using Windows SDK 7.1?
本文转自:http://stackoverflow.com/questions/6319274/how-do-i-run-msbuild-from-the-command-line-using-win ...
- pycharm设置及激活码
电脑上装了python2.7和python3.6两个版本(之前用的都是python3,因为要学习机器学习和深度学习了,机器学习的有些模块还没有更新到python3,于是乎又装了python2)为了能在 ...
- 深入理解js立即执行函数
看过jQuery源码的人应该知道,jQuery开篇用的就是立即执行函数.立即执行函数常用于第三方库,好处在于隔离作用域,任何一个第三方库都会存在大量的变量和函数,为了避免变量污染(命名冲突),开发者们 ...
- 微信小程序web-view之wx.miniProgram.redirectTo
17年微信小程序官方提供了web-view组件. 官方描述:web-view组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面.个人类型与海外类型的小程序暂不支持使用. 这段时间研究了一下小程 ...
- WP8.1StoreApp(WP8.1RT)---SystemTray的变化
原Microsoft.Phone.Shell中的SystemTray,已经改到Windows.UI.ViewManagement中StatusBar了. 只能在代码中设置相关属性. 如: 1 2 3 ...
- C#基础笔记(第十五天)
1.Directory//File 文件 Path 路径 FileStream StreamReader StreamWriter 流 Directory 文件夹 目录 //创建文件夹 Directo ...