javascript获取元素距离网页的left距离
2012-03-28 10:20
344 查看
<!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 runat="server"> <title>test</title> <link href="Styles/Site.css" type="text/css" /> <style type="text/css"> *{ margin:0; padding:0; } #div1{ width:500px; height:500px; margin:100px; position:relative; background-color:#CCCCCC; } #div2{ width:300px; height:300px; position:absolute; left:30px; background-color:#0099ff;} #div3{ width:100px; height:100px; position:absolute; left:30px; background-color:Red; } </style> <script type="text/javascript"> window.onload = function () { var left = 0; //存放left值 var obj = document.getElementById("div3"); while (obj) { //如果这个obj存在的话 left = parseInt(left) + obj.offsetLeft; obj = obj.offsetParent; //obj变成自己的parent,一层一层向上循环累加left的值,直到obj不存在 } document.getElementById("div3").innerHTML = left; } </script> </head> <body> <form id="form1" runat="server"> <div id="div1"> <div id="div2"> <div id="div3"> 0 </div> </div> </div> </form> </body> </html>
新博客已移至:http://keenwon.com
相关文章推荐
- javascript和Jq获取和设置页面元素到顶部、左部距离、宽高元素卷入部分(scroll、scrollTop、scrollLeft、offset、offsetTop、offsetLeft)
- JavaScript驾驭网页-获取网页元素
- 用javascript获取网页中各元素的高度和宽度等信息
- javascript获取网页元素
- javascript获取元素离文档各边距离的方法
- javascript获取元素离文档各边距离的方法
- 8 JavaScript:驾驭网页-获取网页元素
- jQuery和JavaScript获取父级以上元素的写法
- 用Javascript获取元素在页面中的绝对位置
- javaScript中获取元素的id
- JavaScript获取页面大小,滚动条位置,元素位置
- 用Javascript获取页面元素的位置
- JavaScript 获取元素的css属性
- javaScript获取文档中所有元素节点的个数
- 关于JavaScript获取元素背景图url的兼容性问题
- JavaScript DOM中获取元素节点的父节点和父节点名
- 用Javascript获取页面元素的具体位置
- JavaScript client、offset、scroll 属性获取元素大小及偏移
- javascript获取网页URL地址及参数等