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在线聊天项目1.2版 ——开启多个客户端,分别实现数据库注册和登录功能后,成功登陆则登录框消失,好友列表窗出现
登录框消失语句 dispose(); 好友列表窗出现 使用new FriendsFrame(phone,s); 登陆对话框代码修改如下: package com.swift.frame; import ...
- XCode和Cocoa在开发中使用第三方dylib示例
XCode和Cocoa在开发中使用第三方dylib示例 www.educity.cn 发布者:yukowang 来源:网络转载 发布日期:2014年06月13日 XCode和Co ...
- JS设置组合快捷键
为提升用户体验,想要在web页面中通过组合快捷键调出用户帮助页面,具体实现思路是监听keyup事件,在相应的处理函数中进行逻辑编写,代码如下 $(document).keyup(function (e ...
- Bzoj 1088: [SCOI2005]扫雷Mine (DP)
Bzoj 1088: [SCOI2005]扫雷Mine 怒写一发,算不上DP的游戏题 知道了前\(i-1\)项,第\(i\)项会被第二列的第\(i-1\)得知 设\(f[i]\)为第一列的第\(i\) ...
- python中的decorator的作用
1.概念 装饰器(decorator)就是:定义了一个函数,想在运行时动态增加功能,又不想改动函数本身的代码.可以起到复用代码的功能,避免每个函数重复性编写代码,简言之就是拓展原来函数功能的一种函数. ...
- Python把类当做字典来访问
定义一个类将它实例化,我们可以通过obj.属性来访问类的属性,如果想获取类的所有实例变量,我们可以使用obj.__dict__来访问,如下: class A: def __init__(self): ...
- django第六天(模板相关,过滤器和标记)
django第6天 DTL简介 django template language django模板语言 语法: filter{{}} tag{% %} 简单变量的使用 视图函数可以通过两种方式将变量船 ...
- HttpServlet RequestDispatcher sendredirect和forward
Servlet的框架是由两个Java包组成:javax.servlet和javax.servlet.http. 在javax.servlet包中定义了所有的Servlet类都必须实现或扩展的的通用接口 ...
- js中的this关键字
this是Javascript语言的一个关键字它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用,下面分四种情况,详细讨论this的用法 this是Javascript语言的一个关键字. 它 ...
- Hibernate的Session的get()和load()方法区别
hibernate中Session接口提供的get()和load()方法都是用来获取一个实体对象,在使用方式和查询性能上有一些区别. get Session接口提供了4个重载的get方法,分别通过“持 ...