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. Sniper OJ部分writeup

    0x00 shellcode pwn 因为题目直接有源码,我就不拖进IDA了,直接看代码 这是一个典型的栈溢出,我们只需要构造shellcode获得/bin/sh权限就可以得到flag.下面是所用脚本 ...

  2. 一篇关于BEM命名规范

    一直以来自己对命名都是比较混乱的,并没有一个比较好的格式来命名,最近自己碰巧学习到了BEM命名规范,我想谈谈自己的理解以供自己来学习,同时也可以和各位大佬一起学习. BEM是一个很有用的方法可以创建复 ...

  3. PAT Basic 1059

    1059 C语言竞赛 C 语言竞赛是浙江大学计算机学院主持的一个欢乐的竞赛.既然竞赛主旨是为了好玩,颁奖规则也就制定得很滑稽: 0.冠军将赢得一份“神秘大奖”(比如很巨大的一本学生研究论文集……). ...

  4. BZOJ 1587: 叶子合并leaves

    题目大意:求n个数分成k段的最小代价. 题解:DP,没什么好说的. 代码: #include<cstdio> #include<algorithm> using namespa ...

  5. [WPF自定义控件库]使用WindowChrome的问题

    1. 前言 上一篇文章介绍了使用WindowChrome自定义Window,实际使用下来总有各种各样的问题,这些问题大部分都不影响使用,可能正是因为不影响使用所以一直没得到修复(也有可能别人根本不觉得 ...

  6. Django之单表的增删改查

      books/urls.py   """books URL Configuration The `urlpatterns` list routes URLs to vi ...

  7. 【02】markdown在线编辑器

    [01]在线编辑器 https://www.zybuluo.com/mdeditor 在线 Markdown 编辑阅读器 pen - 是一个Markdown编辑器工具.demo 你可以试试这个在线的m ...

  8. vue 判断属性是否为object

    //递归对象 var recursiveObject = Vue.extend({ name: 'recursive-object', template:[ '<ul>', '<li ...

  9. STM32F407 ADC 个人笔记

    1. ADC概述(STM32F4xx系列) 3 个 ADC 可分别独立使用 也可使用双重/三重模式(提高采样率) 2 个通道组 规则通道:相当于正常运行的程序 注入通道:相当于中断(可以打断规则通道的 ...

  10. 【转载】linux之sed用法

    linux之sed用法 原文地址:http://www.cnblogs.com/dong008259/archive/2011/12/07/2279897.html   sed是一个很好的文件处理工具 ...