js和jq中常见的各种位置距离之offset和offset()的区别(三)
offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(不包括元素的边框和父容器的边框)。
offset().left:返回的是相对于当前文档的坐标,使用offset()方法不管该元素如何定位,也不管其父元素如何定位,都是获取的该元素相对于当前窗口的偏移坐标
附上调试代码:
<style>
*{margin:0;padding:0;}
#parent{ position: relative; padding: 10px; margin:30px; background-color:#CCC; border: solid 10px #fbc;}
#child{ height: 200px; width: 200px; padding: 10px; margin: 30px;border: solid 10px #fbc;background-color:#afb;}
</style>
<body>
<div id="parent">
<div id="child">
</div>
</div>
<script src="jquery_1.11.3.min.js"></script>
<script> var child = $("#child").get(0);
console.log( "offsetLeft: " + child.offsetLeft);
console.log( "offset().left: " + $("#child").offset().left);
</script>
注:此文为原创,如需转载请注明出处。
js和jq中常见的各种位置距离之offset和offset()的区别(三)的更多相关文章
- js和jq中常见的各种位置距离之offsetLeft和position().left的区别(四)
offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(不包括元素的边框和父容器的边框).position().left:使用position().left ...
- js和jq中常见的各种位置距离之offset()和position()的区别(二)
offset()返回的是相对于当前文档的坐标,position()返回的是相对于其定位的祖辈元素的坐标. 使用position()方法时事实上是把该元素当绝对定位来处理,获取的是该元素相当于最近的一个 ...
- js和jq中常见的各种位置距离之offsetLeft/clientLeft/scrollLeft (一)
offsetLeft offsetTop offsetWidth offsetHeight offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(不包括元 ...
- HTML中常见的各种位置距离以及dom中的坐标讨论
最近在学习JavaScript,特意买了一本犀牛角书来看看,尼玛一千多页,看的我头昏脑涨,翻到DOM这章节,突然记起平常在使用DOM时,碰到了好多的这个dom里面的各种宽度,高度,特意在此写一写,写的 ...
- Ajax 请求头中常见content-type
四种常见的 POST 提交数据方式 HTTP 协议是以 ASCII 码传输,建立在 TCP/IP 协议之上的应用层规范.规范把 HTTP 请求分为三个部分:状态行.请求头.消息主体.协议规定 POST ...
- js中常见的问题
js中常见的问题 原文链接 1.js获取select标签选中的值 原生js var obj = document.getElementByIdx_x(”testSelect”); //定位id var ...
- JS:JS中常见的 “函数名 is not a function” 错误
js中常见的错误,例如Uncaught TypeError: x is not a function 其原因除了函数本身有错之外,还有一种很奇怪的情况:函数本身没有错,但是运行时就是不能正常运行.这种 ...
- JS中常见设计模式总结
github: https://github.com/14glwu/FEInterviewBox/tree/master/JS%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F ...
- js从数组中删除指定值(不是指定位置)的元素
RT: js从数组中删除指定值的元素,注意是指定值,而不是指定位置. 比如数组{1,2,3,4,5},我要删除其中的元素3,但是这个3的位置我是不知道的,只知道要删除值为3的这一个元素,请问要怎么写? ...
随机推荐
- Qt嵌入式开发环境搭建
一.Qt版本介绍 按照不同的图形界面来划分,分为四个版本: 1.Win32版:适用于windows平台 2.X11版:适用于各种X系统的Linux和Unix平台 3.Mac版:适用于苹果的MacOS ...
- 914D Bash and a Tough Math Puzzle
传送门 分析 用线段树维护区间gcd,每次查询找到第一个不是x倍数的点,如果这之后还有gcd不能被x整除的区间则这个区间不合法 代码 #include<iostream> #include ...
- SDUT 3401 数据结构实验之排序四:寻找大富翁.!
数据结构实验之排序四:寻找大富翁 Time Limit: 150MS Memory Limit: 512KB Submit Statistic Problem Description 2015胡润全球 ...
- discuz_ucenter_api_for_java的中文问题
我踩过的坑,希望你别掉进来. 云服务需要和UCENTER做对接,一个php,一个Java,幸好有了discuz_ucenter_api_for_java,帮我解决了大部分问题,为什么是大部分问题,因为 ...
- HDU 1796 How many integers can you find (容斥)
题意:给定一个数 n,和一个集合 m,问你小于的 n的所有正数能整除 m的任意一个的数目. 析:简单容斥,就是 1 个数的倍数 - 2个数的最小公倍数 + 3个数的最小公倍数 + ...(-1)^(n ...
- ipa包使用命令上传fir.im或者蒲公英
我们的工程做了自动打包处理,但是每次打完ipa后只是放置于一个共享盘或者本地,为了方便测试,每次都要手动上传上传fir或者蒲公英,比较麻烦.所以研究了一下怎么能在打完包后直接脚本上传到上传fir或者蒲 ...
- DjVu转PDG的方法与步骤
作者:马健邮箱:stronghorse_mj@hotmail.com发布:2008.08.03更新:2008.08.24 补充说明:此文成文较早,当时PDG浏览器只支持纯正PDG,不支持名为PDG,实 ...
- C#内存映射大文件并使用Marshal解析结构体信息
内存映射数据处理类主要函数及变量如下: string _filepath; /// <summary> /// 引用内存映射文件 /// </summary> private ...
- [内容分享]粗略判断Shader每条代码的成本
https://mp.weixin.qq.com/s/Vyn1bKaBMHommxbnFPPQeg Unity对Shader文件进行编译的时候,DX9和DX11的版本会直接生成汇编码. ? len ...
- yum源安装Percona
yum源安装更为简单,方便.话不多说,开始吧. 1.下载yum源 yum -y install https://www.percona.com/redir/downloads/percona-rele ...