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. 关于“xx.xx已被OS X使用,无法打开”的问题

    Mac电脑上的文件拷贝到移动硬盘,有时候会出现“xx.xx已被OS X使用,无法打开”的问题. 解决办法: 1.打开终端(或在Mac搜索里面输入Terminal); 2.在终端里输入 xattr -l ...

  2. c++ 计算彩票中奖概率

    操作方法: 输入两个数字,第一个数字是备选总数,第二个数字是选择总数,然后返回中将概率. 可以投注多次,结束的时候返回总的中将概率. #include <iostream> using n ...

  3. (61)zabbix网络发现规则配置实战/详解

    开始配置.首先,我们需要定义发现规则,用于扫描.步骤如下 第一步 Configuration >>Discovery>>Create rule,编辑网络发现规则 如上配置,za ...

  4. MariaDB数据库(五)

    1. MariaDB主从架构 1.1 概述 主从架构用来预防数据丢失.主从多用于网站架构,因为主从的同步机制是异步的,数据的同步有一定延迟,也就是说有可能会造成数据的丢失,但是性能比较好,因此网站大多 ...

  5. webpack-dev-server proxy代理

    一个最简单的代理例子:index.html中有如下代码 fetch('/api/pub/article/list?pageSize=2').then((data)=>{ return data. ...

  6. 【转发】【linux】【php】centos 编译php常见错误

    configure: error: xml2-config not found. Please check your libxml2 installation. yum install libxml2 ...

  7. mat 和IPIImage之间的转换

    opencv2.3.1 Mat::operator IplImageCreates the IplImage header for the matrix.C++: Mat::operator IplI ...

  8. 1 producer — n consumers 模型 实现

    #include<stdio.h> #include<string.h> #include<pthread.h> #include<stdlib.h> ...

  9. 关于Linux下使用expdp和impdp命令对Oracle数据库进行导入和导出操作

    说明:本次导入和导出采用expdp和impdp命令进行操作,这2个命令均需要在服务器端进行操作 http://www.cnblogs.com/huacw/p/3888807.html 一.    从O ...

  10. 交换机VLAN的定义、意义以及划分方式

    什么是VLAN 虚拟网技术(VLAN,Virtual Local Area Network)的诞生主要源于广播.广播在网络中起着非常重要的作用,如发现新设备.调整网络路径.IP地址租赁等等,许多网络协 ...