js中的offsetParent,offsetLeft,offsetTop及jquery的offset(),position()比较
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()比较的更多相关文章
- js的offsetWidth,offsetHeight,offsetLeft,offsetTop
js的offsetWidth,offsetHeight,offsetLeft,offsetTop
- 1.offsetParent,offsetLeft,offsetTop
offsetParent <!doctype html> <html> <head> <meta charset="utf-8"> ...
- JS中的offsetWidth/offsetHeight/offsetTop/offsetLeft、clientWidth/clientHeight/clientTop/clientLeft、scrollWidth/scrollHeight/scrollTop/scrollLeft
这是一组非常容易弄混的参数!都是描述某个盒子元素的宽度.高度以及上或左的距离偏移量. 1. offsetWidth / offsetHeight(不包括外边距) offsetWidth:返回元素的宽度 ...
- js中的scrollTop、offsetTop、clientTop
scrollHeight:获取对象可滚动的高度. scrollWidth:获取对象可滚动的宽度. scrollTop:获取对象最顶端与对象可见区域最顶端的距离. scrollLeft:获取对象左边界与 ...
- js中自定义事件,使用了jQuery
$(function(){ $('#btn').bind("myClick", function(){ //自定义myClick事件 $('#test').append(" ...
- js中的load先执行还是Jquery的ready先执行问题
onload需要页面上所有的资源都加载上之后执行,而ready则是DOM文档树已经解析完成时,说ready比onload快最显著的是比如一个页面上有一个很大的图片,加载要好久,onload只有在图片加 ...
- jQuery之offset,position
获取/设置标签的位置数据 * offset(): 相对页面左上角的坐标 * position(): 相对于父元素左上角的坐标. 需求: 1. 点击 btn1 打印 div1 相对于页面左上角的位置 打 ...
- JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义
JQuery中: width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度: outerWidth()方法用于获得包括内边界(padding)和 ...
- jquery的offset().top和js的offsetTop的区别,以及jquery的offset().top的实现方法
jquery的offset().top和js的offsetTop的区别,以及jquery的offset().top的实现方法 offset().top是JQ的方法,需要引入JQ才能使用,它获取的是你绑 ...
随机推荐
- Java中的线程--Lock和Condition实现线程同步通信
随着学习的深入,我接触了更多之前没有接触到的知识,对线程间的同步通信有了更多的认识,之前已经学习过synchronized 实现线程间同步通信,今天来学习更多的--Lock,GO!!! 一.初时Loc ...
- Alert and Action sheets and Timer and Animation
- Linux基础学习系列目录导航
Linux基础学习-通过VM安装RHEL7.4 Linux基础学习-命令行与图形界面切换 Linux基础学习-基本命令 Linux基础学习-RHEL7.4之YUM更换CentOS源 Linux基础学习 ...
- node.js中常用的fs文件系统
fs文件系统模块对于系统文件及目录进行一些读写操作. 模块中的方法均有异步和同步版本,例如读取文件内容的函数有异步的 fs.readFile() 和同步的 fs.readFileSync(). 异步的 ...
- Cassandra 数据库安装部署
安装版本 cassandra-3.11.4 系统版本 more /etc/redhat-release CentOS Linux release 7.6.1810 (Core) 准备工作 Cassan ...
- selenium.common.exceptions.WebDriverException: Message: u'unknown error: cannot get automation extension\nfrom unknown error: page could not be found: chrome-extension://aapnijgdinlhnhlmodcfapnahmbfeb
Python2.7 selenium3.4.1在使用chrome driver时报错:selenium.common.exceptions.WebDriverException: Message: u ...
- JAVA复制
复制 直接赋值 直接赋值.在 Java 中, A a1 = a2,我们需要理解的是这实际上复制的是引用,也就是说 a1 和 a2 指向的是同一个对象.因此,当 a1 变化的时候, a2 里面的成员变量 ...
- linux python 安装 pip出现 No module named 'setuptools'
1.下载pip wget --no-check-certificate https://pypi.python.org/packages/source/p/pip/pip-8.0.2.tar.gz#m ...
- pep-8要求归纳
代码布局缩进每个缩进级别使用4个空格. 连续行应使用Python的隐式行连接括号,括号和大括号,或使用悬挂缩进 来垂直对齐包装元素.当使用悬挂式缩进时,应考虑以下内容:第一行应该没有任何争论,应该使用 ...
- Configure Red Hat Enterprise Linux shared disk cluster for SQL Server
下面一步一步介绍一下如何在Red Hat Enterprise Linux系统上为SQL Server配置共享磁盘集群(Shared Disk Cluster)及其相关使用(仅供测试学习之用,基础篇) ...