js中的offsetParent,offsetLeft,offsetTop及jquery的offset(),position()比较
1、offsetParent
元素的offsetParent并不是元素的父元素,判断元素的offsetParent要根据以下情况:
1)当DOM结构层次中的元素均没有进行css定位(设置position为absolute或relative),则offsetParent为根目录;
2)当元素的父元素没有进行css定位,则offsetParent取最近的已经定位的元素;
3)当元素的父元素进行了css定位,则offsetParent为父元素;
2、offsetLeft,offsetTop
在IE中:总是以父元素为参照对象进行偏移;偏移量会加上父元素的边框值。
在非IE中:以最近非静态定位元素为参照对象进行偏移。
3、jquery的offset()及position()
offset():是用于计算绝对偏移量,获取元素在当前窗口的相对偏移,参照对象为body。
position():是用于计算相对偏移量,参照对象为最近非静态定位的元素。
因此,如果当前元素的上级元素position属性值都没有被定义为absolute,relative,fixed,那么当前元素的最近父级定位元素就应该是body元素,此时相对偏移位置和绝对偏移位置是相同的。
js中的offsetParent,offsetLeft,offsetTop及jquery的offset(),position()比较的更多相关文章
- js的offsetWidth,offsetHeight,offsetLeft,offsetTop
js的offsetWidth,offsetHeight,offsetLeft,offsetTop
- 1.offsetParent,offsetLeft,offsetTop
offsetParent <!doctype html> <html> <head> <meta charset="utf-8"> ...
- JS中的offsetWidth/offsetHeight/offsetTop/offsetLeft、clientWidth/clientHeight/clientTop/clientLeft、scrollWidth/scrollHeight/scrollTop/scrollLeft
这是一组非常容易弄混的参数!都是描述某个盒子元素的宽度.高度以及上或左的距离偏移量. 1. offsetWidth / offsetHeight(不包括外边距) offsetWidth:返回元素的宽度 ...
- js中的scrollTop、offsetTop、clientTop
scrollHeight:获取对象可滚动的高度. scrollWidth:获取对象可滚动的宽度. scrollTop:获取对象最顶端与对象可见区域最顶端的距离. scrollLeft:获取对象左边界与 ...
- js中自定义事件,使用了jQuery
$(function(){ $('#btn').bind("myClick", function(){ //自定义myClick事件 $('#test').append(" ...
- js中的load先执行还是Jquery的ready先执行问题
onload需要页面上所有的资源都加载上之后执行,而ready则是DOM文档树已经解析完成时,说ready比onload快最显著的是比如一个页面上有一个很大的图片,加载要好久,onload只有在图片加 ...
- jQuery之offset,position
获取/设置标签的位置数据 * offset(): 相对页面左上角的坐标 * position(): 相对于父元素左上角的坐标. 需求: 1. 点击 btn1 打印 div1 相对于页面左上角的位置 打 ...
- JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义
JQuery中: width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度: outerWidth()方法用于获得包括内边界(padding)和 ...
- jquery的offset().top和js的offsetTop的区别,以及jquery的offset().top的实现方法
jquery的offset().top和js的offsetTop的区别,以及jquery的offset().top的实现方法 offset().top是JQ的方法,需要引入JQ才能使用,它获取的是你绑 ...
随机推荐
- Php教程
第一部:PHP基础部分(131集,发布完毕) 讲html与PHPt基础,PHP环境搭建,与留言本编写. 下载地址:① HTML视频[2014新版] http://pan.baidu.com/s/1ve ...
- classList属性和className的区别
className的不方便之处: 在操作类名时,需要通过className属性添加,删除和替换类名.因为className中是一个字符串,所以即使只修改字符串一部分,也必须每次都设置整个字符串的值.( ...
- React初识整理(五)--Redux和Flux(解决状态传递问题)
Flux 1.引入:在React的应⽤中,状态管理是⼀个⾮常重要的⼯作.我们不会直接对DOM节点进⾏操作,⽽是通过将数据设置给state,由state来同步UI,这种⽅式有个潜在的问题,每个组件都有独 ...
- HDU-1217-Arbitrage(SPFA)
这题和以往的求最短路的题目略微有点不一样,以往求的都是最小的,这题求的是大的,而且还是乘法. 我们求的时候初始化的时候就要进行相反的初始化了,把它们初始化为0,然后比较大的就更新. 因为这题的点少边多 ...
- 无法连接Elasticsearch解决方案
前言 最近还是在弄ELK,并且在测试Logstash从kafka消费日志(最后输出到Elasticsearch). 测试完毕后,在kibana中,并没有发现Elasticsearch中的数据. 后来装 ...
- css3如何实现click后页面过渡滚动到顶部
var getTop = document.getElementById("get-top"); var head = document.getElementById(" ...
- A Fast and Easy to Use AES Library
http://www.codeproject.com/Articles/57478/A-Fast-and-Easy-to-Use-AES-Library Introduction EfAesLib i ...
- Python数据分析库之pandas,你该这么学!No.1
写这个系列背后的故事 咦,面试系列的把基础部分都写完啦,哈哈答,接下来要弄啥嘞~ pandas吧 外国人开发的 翻译成汉语叫 熊猫 厉害厉害,很接地气 一个基于numpy的库 干啥的? 做数据分析用的 ...
- DFS:POJ1562-Oil Deposits(求连通块个数)
Oil Deposits Time Limit: 1000MS Memory Limit: 10000K Description The GeoSurvComp geologic survey com ...
- expdp / impdp 用法详解(Oracle)
一 .关于expdp和impdp 使用EXPDP和IMPDP时应该注意的事项: EXP和IMP是客户端工具程序,它们既可以在客户端使用,也可以在服务端使用. EXPDP和IMPDP是服务端的工 ...