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元素,此时相对偏移位置和绝对偏移位置是相同的。

时间: 2024-08-13 20:26:51

js中的offsetParent,offsetLeft,offsetTop及jquery的offset(),position()比较的相关文章

append和appendTo的区别以及appendChild用法 (一个是js中,另两个是jquery中)

append和appendTo的区别以及appendChild用法 作者: 字体:[增加 减小] 类型:转载 很多新手朋友们对append和appendTo的区别以及js中的appendChild用法有所模糊,下面就举例为大家详细介绍下,感兴趣的朋友不要错过 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择的对象 实例: $('#a').append('content'); $('<div>con

JS中的数据类型(见《Jquery实战&lt;附录&gt;》)

一.所有数据类型的常量都看作对象.(一).JS自带的数据类型怎样创建对象?number.String这些基本类型的值,23."abc"等常量本身就是对象.Date类型:通过一个构造函数创建对象,new Date(2015,7,8)(二).用户怎样创建自定义的对象?1.通过var o = new Object():然后动态的指定对象o的属性.2.通过对象字面量:3.通过定义一个构造函数. 二.JS自定义对象的特点对象包含属性,属性包含属性名和属性值,属性名是字符串,属性值可以是任何对象.

js的offsetWidth,offsetHeight,offsetLeft,offsetTop

jQuery之offset,position

获取/设置标签的位置数据 * offset(): 相对页面左上角的坐标 * position(): 相对于父元素左上角的坐标. 需求: 1. 点击 btn1 打印 div1 相对于页面左上角的位置 打印 div2 相对于页面左上角的位置 打印 div1 相对于父元素左上角的位置 打印 div2 相对于父元素左上角的位置 2. 点击 btn2 设置 div2 相对于页面的左上角的位置 代码实现: //1. 点击 btn1 $("#btn1").click(function(){ // 打

【juincen】Java中的接口interface类比js中的回调函数

前几天在左讯飞语音的时候,无意间意识到java中的接口和js中常用的回调函数有点类似,今天在这儿整理一下思路. interface,Java中的接口,为什么会有这个东西. 一,预留声明 比如两个程序员A和B,A要写一段程序,其中需要调用到B写的程序.这时候A可以写一个接口: public interface Demo{ void deal(); } A要调用的方法先“预留声明”在接口里:deal 然后B去完善这个接口,B写了一个实现类实现了这个Demo接口. A在自己的业务逻辑里面只用调用接口的

js中offsetTop、clientTop、scrollTop

Js中的offsetTop.clientTop.scrollTop各属性介绍 页可见区域宽: document.body.clientWidth;  /document.documentElement.clientWidth网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offsetWidth   (包括边线的宽);网页可见区域高: document.body.offsetHeight (包括边线的宽);网页正文全文宽: do

JS中innerHTML、outerHTML、innerText 、outerText、value的区别与联系? jQuery中的text()、html()和val()

一.JS中innerHTML.outerHTML.innerText .outerText.value的区别与联系?jS中设置或者获取所选内容的值:①innerHTML :属性设置或返回该标签内的HTML.也就是从对象的起始位置到终止位置的全部内容,包括Html标签.②outerHTML:属性设置或返回该标签及标签内的HTML.也就是从对象的该标签起始到终止位置的全部内容,包括Html标签.如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去

AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法

AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一个可用的模块化 JavaScript 的解决方案. AMD 模块格式本身是一个关于如何定义模块的提案,在这种定义下模块和依赖项都能够异步地进行加载.它有很多独特的优势,包括天生的异步及高度灵活等特性,这些特性能够解除常见的代码与模块标识间的那种紧密耦合.目前它已经被很多项目所接纳,包括jQuery(1.7). RequireJS RequireJS是一个工具库,主

jquery ajax中支持哪些返回类型以及js中判断一个类型常用的方法?

1 jquery ajax中支持哪些返回类型在JQuery中,AJAX有三种实现方式:$.ajax() , $.post , $.get(). 预期服务器返回的数据类型.如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如 XML MIME 类型就被识别为 XML.在 1.4 中,JSON 就会生成一个 JavaScript 对象,而 script 则会执行这个脚本.随后服务器端返回的数据会根据这个值解析后,传递给回调 函数.可用值: •"xml": 返回