关于offset共有5个东西需要弄清楚:

  1、offsetParent

  2、offsetTop

  3、offsetLeft

  4、offsetWidth

  5、offsetHeight

  (1)offsetWidth也就是元素的可视宽度,这个宽度包括元素的边框(border),水平padding,垂直滚动条宽度,元素本身宽度等。

  offsetHeight跟offsetWidth类似,只是方向改为垂直方向上的。

  经过测试可以发现,即使元素加上水平或垂直滚动条,offsetWidth跟offsetHeight的值是不会更改的,因为浏览器渲染时把滚动条的宽度(或高度)算在了元素本身的宽度(或高度)中了。

  我们不难看出:

  offsetWidth=(border-width)*2+(padding-left)+(width)+(padding-right)

  offsetHeight=(border-width)*2+(padding-top)+(height)+(padding-bottom)

  (2)offsetLeft与offsetTop却不是这样,这两个属性与offsetParent有关

    offsetLeft也就是返回对象元素边界的左上角顶点相对于offsetParent的左上角顶点的水平偏移量。从这个定义中我们可以明确地知道offsetLeft与当前元素的margin-left和offsetParent的padding-left有关。

    offsetTop也就是返回对象元素边界的左上角顶点相对于offsetParent的左上角顶点的垂直偏移量

  (3)offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素的引用。

  总的来说两条规则:

  1、如果当前元素的祖先元素没有进行CSS定位(position为absolute或relative),offsetParent为body。

  2、如果当前元素的祖先元素中有CSS定位(position为absolute或relative),offsetParent取最近的那个父级元素。

offse的更多相关文章

  1. offse家族属性

    在JavaScript中,常用offset.scroll和client家族属性来表示元素的位置和大小相关属性,最近在网上找到了一张图来表示三者之间的关系,正好可以在此借鉴一下. 本次主要来看一下off ...

  2. Fuzz的那些事

    Fuzz这个词汇行内的都懂,fuzz工具我就不多说了. 今天,说说fuzz前的准备工作--如何对软件进行修改实现可自动化和无人值守fuzz. 很多软件会有试用期.弹窗.覆盖提示.人机交互等等,这些都会 ...

  3. JQuery函数库

    核心Core 函数$()动态创建由 jQuery 对象包装的 DOM 元素$.unique()去重排序函数$.inArray()在数组中搜索指定的值并返回其索引$.merge()合并数组 属性Para ...

  4. javascript + jquery函数大全

    JAVASCRIPT Array 函数   array创建数组 concat()连接两个或更多的数组,并返回结果. join()把数组中所有元素组成字符串. pop()删除并返回数组的最后一个元素 s ...

  5. Delphi TStream 详细介绍

    Delphi TStream 详细介绍Stream对象,又称流式对象,是TStream.THandleStream.TFileStream.TMemoryStream.TResourceStream和 ...

  6. 一个使用openGL渲染的炫丽Android动画库

    android-magic-surface-view 这是一个 android 动画特效库, 可以实现各种炫酷动画. github地址: https://github.com/gplibs/andro ...

  7. Python学习笔记005_文件_OS_模块_pickle

    >>> >>> # 文件 open()方法是打开文件,它有很多参数,第一个文件名是必须的(带路径)>>> >>> f = ope ...

  8. 【持续更新】JavaScript常见面试题整理

    [重点提前说]这篇博客里的问题涉及到了了JS中常见的的基础知识点,也是面试中常见的一些问题,建议初入职场的园友Mark收藏,本文会持续更新~ 1. 引入JS的三种方式 1.在HTML标签中直接使用,直 ...

  9. jQuery(三)

    jquery链式调用 jquery对象的方法会在执行完后返回这个jquery对象,所有jquery对象的方法可以连起来写: $('#div1') // id为div1的元素 .children('ul ...

随机推荐

  1. 自动生成build.xml文件

    使用Eclipse 自动生成 Ant的Build.xml 配置文件,选择要生成Build.xml文件的项目,鼠标右键, Export-> General -> Ant Buildfiles ...

  2. 关于UIView的AutoresizingMask属性的研究

    在 UIView 中有一个autoresizingMask的属性,它对应的是一个枚举的值(如下),属性的意思就是自动调整子控件与父控件中间的位置,宽高. 1 2 3 4 5 6 7 8 9 enum  ...

  3. C#面向对象特征的具体实现及作用详解

    转自:http://www.jb51.net/article/42390.htm 众所周知,面向对象编程的特点为:封装.继承.多态.C#是一门完全面向对象的语言,由于比Java推出的时间还要晚,所以对 ...

  4. Unity3D 之 iTween 相关

    有过 Flash 开发经验的朋友,对这个 iTween 应该感到非常熟悉吧,在 Flash 平台有一款功能几乎一样的插件 TweenLite,至于哪个先哪个后,有没有相互借鉴之类的就不在讨论范围了. ...

  5. python 执行execute遇到的问题

    1.如下方式去查询无法查询出结果,但直接在数据库查询中去查询是能查询到结果的,郁闷中,花了很久的时间才知道原来是双引号导致的 把:name="%s" 中的%s前后的双引号去掉就对了 ...

  6. category - junit用例分组执行

    一.category 和 testSuite的比较 (1)testSuite是类级分组(xx.class) (2)category是用例级分组(@Test) (3)category是testSuite ...

  7. css 分享之background-attachment 属性

    微分享才发现的css背景图达到的效果代码属性: background-attachment -- 定义背景图片随滚动轴的移动方式: 值 描述 scroll 默认值.背景图像会随着页面其余部分的滚动而移 ...

  8. jQuery 点击显示再次点击隐藏

    <html> <head> <script type="text/javascript" src="/jquery/jquery.js&qu ...

  9. 如何用fir.im 命令行工具 打包上传

    1.注册fir.拿到token 2.安装 fir-cli 使用 Ruby 构建, 无需编译, 只要安装相应 gem 即可. $ ruby -v # > 1.9.3 $ gem install f ...

  10. 需要不断学习的编程知识库list

    1.重构思想: 2.回调思想: 3.封装思想: 4.模块化思想: 5.复用思想: 6.C++的面向对象思想:  -----后续