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…
1.offsetParent 元素的offsetParent并不是元素的父元素,判断元素的offsetParent要根据以下情况: 1)当DOM结构层次中的元素均没有进行css定位(设置position为absolute或relative),则offsetParent为根目录: 2)当元素的父元素没有进行css定位,则offsetParent取最近的已经定位的元素: 3)当元素的父元素进行了css定位,则offsetParent为父元素: 2.offsetLeft,offsetTop 在IE中:…
<!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: 元素的上边框至包含元素的上内边框之间的像素距离 offsetParent: 保存着包含元素的引用 注意: 1.当对象的offsetParent属性指向…
/*在事件的内部console.dir(event)*/ /** * 事件对象event * clientX/clientY 获取鼠标基于浏览器窗口(可视区域的坐标位置)全兼容 * * pageX/pageY 获取鼠标基于网页文本的坐标位置 ie8不兼容 * -- 兼容方案:clintY+页面滚动出去垂直距离 * */ /** * console.dir(element) * 元素element * offsetLeft/offsetTop 获取基于offsetParent<--当前元素的定位父…
js的offsetWidth,offsetHeight,offsetLeft,offsetTop…
封装一个函数获得任一元素在页面的位置 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…
w3c规范,请戳这里:http://www.w3.org/TR/cssom-view/#dom-htmlelement-offsetparent 一.offsetParent 英文解读: part one:offsetParent作为一个元素属性并不是每一个元素都是值得拥有的,对于符合以下情况的元素是没有offsetParent这个属性的: ① 该元素没有css布局的盒子模型(我觉得这句话很难理解,有见识的人指教): ② 该元素是根元素(关于这一点的理解在后续会解释,其实原因就是offsetPa…
偏移量(offset dimension) 偏移量:包括元素在屏幕上占用的所有可见空间,元素的可见大小有其高度,宽度决定,包括所有内边距,滚动条和边框大小(注意,不包括外边距). 以下4个属性可以获取元素的偏移量 1. offsetHeight:元素在垂直方向上占用的空间大小,以像素计.包括元素的高度(可见的),水平滚动条的高度,上边框高度和下边框高度. 2. offsetWidth:元素在水平方向上占用的空间大小,以像素计.包括元素的宽度(可见的),垂直滚动条的宽度,左边框宽度和右边框宽度.…
*{ margin:0; padding:0} div {padding: 40px 50px;} #div1 {background: red;} #div2 {background: green; } #div3 {background: orange;} <div id="div1"> <div id="div2"> <div id="div3"></div> </div> <…