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. PAT (Basic Level) Practise (中文)-1038. 统计同成绩学生(20)

    PAT (Basic Level) Practise (中文)-1038. 统计同成绩学生(20)    http://www.patest.cn/contests/pat-b-practise/10 ...

  2. UEditor1.4.3的实例程序

    官网:http://ueditor.baidu.com/website/ 配置下就可以使用 (1)下载,解压后文件结构如下: (2)将整个文件夹改名ueditor后复制到WebRoot目录下: (3) ...

  3. Dubbo中的监控和管理

    一.Dubbo中的监控 1.原理 原理:服务消费者和提供者,在内存中累计调用次数和调用时间,定时每分钟发送一次统计数据到监控中心. 2.搭建监控服务 3.修改配置文件 修改注册中心的地址: 注意:这个 ...

  4. 响应式Web设计- 图片

    使用width属性:如果width属性设置为100%,图片会根据上下范围实现响应式的功能. <!DOCTYPE html><html><head><meta ...

  5. 【tarjan 拓扑排序 dp】bzoj1093: [ZJOI2007]最大半连通子图

    思维难度不大,关键考代码实现能力.一些细节还是很妙的. Description 一个有向图G=(V,E)称为半连通的(Semi-Connected),如果满足:?u,v∈V,满足u→v或v→u,即对于 ...

  6. [OpenJudge] 2727 仙岛寻药

    2727:仙岛求药 查看 提交 统计 提问 总时间限制: 1000ms 内存限制: 65536kB 描述 少年李逍遥的婶婶病了,王小虎介绍他去一趟仙灵岛,向仙女姐姐要仙丹救婶婶.叛逆但孝顺的李逍遥闯进 ...

  7. RN安卓原生模块

    https://facebook.github.io/react-native/docs/native-modules-android.html RN实际就是依附在原生平台上,把各种各样的RN组件展示 ...

  8. CSS盒模型-box-sizing

    CSS中Box model是分为两种,第一种是W3C的标准模型,另一种是IE的传统模型 1.W3C的标准Box Model: /*外盒尺寸计算(元素空间尺寸)*/ Element空间高度 = cont ...

  9. 我的Python分析成长之路10

    matplot数据可视化基础 制作提供信息的可视化(有时称作绘图)是数据分析中最重要任务之一. 1.图片(画布)与子图 plt.figure :创建一张空白的图片,可以指定图片的大小.像素. figu ...

  10. windows中阿里的自动化测试macaca安装配置

    一.环境配置 node cnpm环境安装 安卓环境配置 参考文档https://macacajs.github.io/zh/environment-setup 全局安装macaca-cli macac ...