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才能使用,它获取的是你绑 ...
随机推荐
- Sass基本数据类型和各类型的原生方法
数据类型: 数字:1,2,3,11,10px (可以带单位) 字符串:"asd",'asd',asd (有引号和无引号都是字符串类型) 如 $name : zhang san ; ...
- 【计数】51nod1677 treecnt
要将答案看做是小问题的贡献和 Description 给定一棵n个节点的树,从1到n标号.选择k个点,你需要选择一些边使得这k个点通过选择的边联通,目标是使得选择的边数最少. 现需要计算对于所有选择k ...
- Tcp 三次握手 四次分手
看了 余晟以为的 “tcp没那么难吧”,算是对三次握手,四次分手有了一点点理解,记录下来以方便自己以后的查看. 原文链接:https://mp.weixin.qq.com/s?__biz=MzA3MD ...
- 九:SQL之DQL数据查询语言多表操作
前言: 一:数据准备 员工表emp 和部门表 dept 注意:我在录入员工表的时候,特意添加了两条没有部门的员工,他们的部门id对应为null; --分别创建部门和员工表,并实现一对多关系 DROP ...
- PWA天气应用
https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0 1.介绍 这里将使用PWA技术来构建一个天气web应用,这个ap ...
- python中的list、tuple和dictionary
列表 列表是python中最基本的数据结构之一,并且列表的数据项不需要具有相同的数据类型,创建一个列表,只需把逗号分隔的不同数据项使用方括号括起来即可.具体的定义式如下: list=['变量1','变 ...
- shell 中exec、source以及bash的区别
在bash shell中,source.exec以及sh都可以用来执行shell script,但是它们的差别在哪里呢? sh:父进程会fork一个子进程,shell script在子进程中执行 so ...
- WIN10配置instantclient
在PLSQL Developer目录下建立如下bat文件,替换其快捷方式,启动PLSQL Developer: @echo off set path=C:\instantclient-basic-nt ...
- awk中next以及getline用法示例
在awk中,如果调用next,那么next之后的命令就都不执行了.此行文本的处理到此结束,开始读取下一条记录并操作. 实例如下: [plain] view plain copy zoer@ubuntu ...
- kendo Grid 列添加自定义模板
columns: [ {field: "行为",template: "<a href='#= 行为#'>#= 行为#</a>"}, {f ...