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才能使用,它获取的是你绑 ...
随机推荐
- Bootstrap历练实例:警告样式按钮
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...
- js基本语法之 值类型(数据类型)(变量类型)
一.不可改变的原始值(栈数据)(五个) 数字(number),字符串(string),布尔值(boolean),undefined,null 其中;undefined是未定义的意思,而null是空的意 ...
- PAT 乙级 1033
题目 题目地址:PAT 乙级 1033 题解 本题一直有一分的样例点过不了,原因在于用了cin接收输入的字符…… 问题在于:如果用cin输入,无法接收无坏键的情况的输入,需要getline作为输入:这 ...
- hihoCoder-1098-kruskal
如果起始点和终止点的父节点相同,就说明它们就已经在同一个连通分量里面,说明,起始点和终止点在此之前就已经被连入同一个分量之中,如果此时还将起始点和终止点连入此分量,就会形成回路,想象一个三角形,你大概 ...
- 【Java_基础】java中static与final关键字的区别
1.static关键字 经static关键字修饰的成员被该类的所有对象所共享,任意一对象对静态变量的修改其它对象都是可见的.通常通过类名来引用static成员.类加载的连接阶段将会为静态成员变量在jv ...
- 文件操作-mkdir
Linux mkdir命令 主要用来创建目录,也可以直接创建多层目录,本文就为大家介绍下 Linux mkdir命令 . 转载自https://www.linuxdaxue.com/linux-com ...
- css3-flex-box(2)
使用方法 使用Flexbox布局只要在父容器元素上设置display属性: .flex-container { display: -webkit-flex; /* Safari */ display: ...
- 异步FIFO最小深度计算
计算FIFO深度是设计FIFO中常遇到的问题.常识告诉我们,当读速率慢于写速率时,FIFO便可被用作系统中的缓冲元件或队列.因此FIFO的大小基本上暗示了所需缓存数据的容量,该容量取决于读写数据的速率 ...
- python-格式化输出(考试必考)
Python与用户交互 如何交互 我们使用input()方法来与用户交互,但是无论我们输入的值是数字类型.字符串类型.列表类型,input的接收值都是字符串类型. name = input('请输入你 ...
- 关于get_magic_quotes_gpc()函数
function sqlReplace($str) { $strResult = $str; if(!get_magic_quotes_gpc()) //如果 gpc 没有开的话 { $strResu ...