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. Pycharm快捷键及Python常用转义符

    不管是windows.xshell或者pycharm,学会使用快捷键都会使学习工作达到事半功倍的效果.这篇博客收集了部分常用的pycharm快捷键,分享给大家,希望对大家有用. 1. 常用快捷键 Py ...

  2. docker系列之分区挂载和数据卷

    容器中的文件系统是独立的, 一旦容器被删除, 则文件系统也会被删除. 如果想容器和实体机在文件系统层面打通, 可以把指定目录挂载到容器当中: docker run -d -p 5000:22 -v / ...

  3. Ajax跨域问题---jsonp

    跨域:跨域名  一个域名下的文件去请求了和他不一样的域名下资源文件,那么就会产生跨域请求 解决跨域问题办法: 1.将要访问的外部资源存到本域名下的一个php文件 2.用flash方式 3.JSONP: ...

  4. 【mysql】linux, mac mysql数据库root 密码忘记修改

    首先关闭正在运行的mysqld进程 执行mysqld_safe --skips-grant-tables & 双击enter 键进入命令行模式 执行 mysql linux 系统执行:upda ...

  5. LeetCode 673. Number of Longest Increasing Subsequence

    Given an unsorted array of integers, find the number of longest increasing subsequence. Example 1: I ...

  6. python基础——17(面向对象)

    一.名称空间 名称空间有内置名称空间,全局名称空间,局部名称空间.它是用来存放名字与值对应关系的地方. test.py文件: num = 10 def fn(): print("fn run ...

  7. loj2002 「SDOI2017」序列计数

    水题 #include <iostream> #include <cstring> #include <cstdio> using namespace std; t ...

  8. C++ char数组和string类简单使用总结

    使用char数组,进行字符串的操作,是c风格的操作方式. string是C++的风格,感觉string本质上就是一个vector<char> 以下代码详细展示了字符串的常见操作 #incl ...

  9. Educational Codeforces Round 31

    A. Book Reading time limit per test 2 seconds memory limit per test 256 megabytes input standard inp ...

  10. MySQL容量规划之tcpcopy应用之道

    官方文档:https://github.com/session-replay-tools/mysql-replay-module tcpcopy可以将正式环境上来自客户端的请求复制一份到测试端并复现, ...