简单理解offsetleft、offsetTop、offsetParent

【简单理解offsetleft、offsetTop、offsetParent】的更多相关文章

简单理解offsetleft、offsetTop、offsetParent

先来看看offsetParent返回的是什么值 ele.offsetParent返回的是ele元素最近的并且是定位过(relative,absolute)的父元素,如果没有父元素或者是父元素中没有一个是定位过的,返回值就是body元素 ele.offsetLeft和ele.offsetTop取值问题,分多种情况: 如果ele是body的直接子元素,返回值则是ele距离body左侧或顶部的距离如果ele不是body的直接子元素,在父元素进行定位(relative,absolute)的情况下,…

js中offsetLeft,offsetTop,offsetParent计算边距方法

封装一个函数获得任一元素在页面的位置 var GetPosition= function (obj) { var left = 0; var top = 0; while(obj.offsetParent)//如果obj的有最近的父级定位元素就继续 { left += obj.offsetLeft;//累加 top += obj.offsetTop; obj=obj.offsetParent;//更新obj,继续判断新的obj是否还有父级定位,然后继续累加 } return {“left”:le…

1.offsetParent,offsetLeft,offsetTop

offsetParent <!doctype html> <html> <head> <meta charset="utf-8"> <title>document</title> <style> div{ padding:40px 50px;} #div1 { background:red;} #div2 { background:blue; position:relative;} #div3 { ba…

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中:…

offsetLeft, offsetTop以及postion().left , postion().top有神马区别

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-…

offsetWidth, offsetHeight, offsetLeft, offsetTop,clientWidth, clientHeight,clientX,pageX,screenX

offsetWidth: 元素在水平方向上占用的空间大小.包括元素的宽度,内边距,(可见的)垂直滚动条的宽度,左右边框的宽度. offsetHeight:元素在垂直方向上占用的空间大小,包括元素的高度,内边距,(可见的)水平滚动条的高度,上下边框的高度. offsetLeft: 元素的左边框至包含元素的左内边框之间的像素距离 offsetTop: 元素的上边框至包含元素的上内边框之间的像素距离 offsetParent: 保存着包含元素的引用注意: 1.当对象的offsetParent属性指向…

JavaScript--clientX,clientY、pageX,pageY、offsetLeft,offsetTop/offsetWidth,offsetHeight、scrollLeft,scrollTop/scrollWidth,scrollHeight、clientHeight,clientWidth区别

/*在事件的内部console.dir(event)*/ /** * 事件对象event * clientX/clientY 获取鼠标基于浏览器窗口(可视区域的坐标位置)全兼容 * * pageX/pageY 获取鼠标基于网页文本的坐标位置 ie8不兼容 * -- 兼容方案:clintY+页面滚动出去垂直距离 * */ /** * console.dir(element) * 元素element * offsetLeft/offsetTop 获取基于offsetParent<--当前元素的定位父…