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()比较的更多相关文章

  1. js的offsetWidth,offsetHeight,offsetLeft,offsetTop

    js的offsetWidth,offsetHeight,offsetLeft,offsetTop

  2. 1.offsetParent,offsetLeft,offsetTop

    offsetParent <!doctype html> <html> <head> <meta charset="utf-8"> ...

  3. JS中的offsetWidth/offsetHeight/offsetTop/offsetLeft、clientWidth/clientHeight/clientTop/clientLeft、scrollWidth/scrollHeight/scrollTop/scrollLeft

    这是一组非常容易弄混的参数!都是描述某个盒子元素的宽度.高度以及上或左的距离偏移量. 1. offsetWidth / offsetHeight(不包括外边距) offsetWidth:返回元素的宽度 ...

  4. js中的scrollTop、offsetTop、clientTop

    scrollHeight:获取对象可滚动的高度. scrollWidth:获取对象可滚动的宽度. scrollTop:获取对象最顶端与对象可见区域最顶端的距离. scrollLeft:获取对象左边界与 ...

  5. js中自定义事件,使用了jQuery

    $(function(){ $('#btn').bind("myClick", function(){ //自定义myClick事件 $('#test').append(" ...

  6. js中的load先执行还是Jquery的ready先执行问题

    onload需要页面上所有的资源都加载上之后执行,而ready则是DOM文档树已经解析完成时,说ready比onload快最显著的是比如一个页面上有一个很大的图片,加载要好久,onload只有在图片加 ...

  7. jQuery之offset,position

    获取/设置标签的位置数据 * offset(): 相对页面左上角的坐标 * position(): 相对于父元素左上角的坐标. 需求: 1. 点击 btn1 打印 div1 相对于页面左上角的位置 打 ...

  8. JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义

    JQuery中: width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度: outerWidth()方法用于获得包括内边界(padding)和 ...

  9. jquery的offset().top和js的offsetTop的区别,以及jquery的offset().top的实现方法

    jquery的offset().top和js的offsetTop的区别,以及jquery的offset().top的实现方法 offset().top是JQ的方法,需要引入JQ才能使用,它获取的是你绑 ...

随机推荐

  1. nonrepetitive DNA|repetitive DNA|moderaly repetitive DNA|highly repetitive DNA|selfish gene|junk DNA

    5.5 真核生物基因组包含非重复DNA序列和重复DNA序列 依据重复序列的频数,可将真核生物DNA做如下分类: 1次即非重复DNA(nonrepetitive DNA,相应的也会更长,随着基因组扩大( ...

  2. github+hexo+themes搭建简易个性主题博客

    0x00  install Node.js and git 安装Node.js:http://www.runoob.com/nodejs/nodejs-install-setup.html 安装git ...

  3. gdb插件使用方法

    0x00 peda peda 安装: git clone https://github.com/longld/peda.git ~/peda echo "source ~/peda/peda ...

  4. Bootstrap历练实例:点击激活的按钮

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  5. HDU-1455-木棒

    这题的话,我们,定义一个结构体,然后把木棒从大到小排序. 这些木棒如果是由多根等长木棒组成的,那目标长度一定大于等于其中最长的木棒长度,所这就是我们搜索的下限. 上限就是所有的木棒组成了一根木棒,就是 ...

  6. GIMP图片头发的处理

    1/选中图片,添加Alpha Channel 2/点击Duplicate Layer,复制图层: 3/接着需要调整一下色差,选中Color下的Curves,调节曲线,使背景看起来更白一点 4/选中Co ...

  7. DELL R730 服务器拷贝大文件

    从服务器上拷贝大文件,通过USB拷贝,写入速度很慢,而且拷贝到100多G的时候直接卡死. 原因:服务器的USB是2.0,传输速率很慢. 解决方法: 找一台笔记本,USB 接口是3.0的,通过网络共享传 ...

  8. (转)Objective-C语言--属性和实例变量

    本文转自http://blog.csdn.net/addychen/article/details/39525681 使用Objective-C一段时间了,一直没有弄清楚在Objective-C中属性 ...

  9. python常见陷阱

    copy to https://pythonguidecn.readthedocs.io/zh/latest/writing/gotchas.html 大多数情况下,Python的目标是成为一门简洁和 ...

  10. prometheus + mysqld_exporter + grafana 实现对mysql db的监控

    https://blog.csdn.net/hfut_wowo/article/details/78536022 1.参考这篇博文2.博主的用的是windows版本 prometheus-2.5.0- ...