javascript获取元素距离网页的left距离

原创 2012年03月28日 10:20:52
<!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

js 获取某个标签元素的left

         例如:html对象层次结构如下:         div-table-tr-td-text;         其中div的left是200,而其余的对象都未定义left属性,则在te...
  • BiologyPianoProgram
  • BiologyPianoProgram
  • 2009年04月30日 11:25
  • 1881

无定位父元素时offsetParent为body,但是offsetTop/offsetLeft计算距离从html开始

问题1:什么是offsetParent? 解答:返回的是被定位的祖先元素,如果没有被定位的元素是body元素! 问题2:发生margin重叠以后,我们怎么计算到offsetParent的距离? 注意:...
  • liangklfang
  • liangklfang
  • 2016年01月08日 10:21
  • 2569

js与jquery获取滚动条距浏览器顶部的距离

最近在做项目的时候遇到需要用js获取滚动条距离窗口顶端的距离和js获取浏览器可视化窗口的大小,在这儿做一个整理保存:    一、jQuery获取的相关方法 Js代码   ...
  • sunny327
  • sunny327
  • 2015年08月11日 10:34
  • 11647

获取元素相对于文档的偏移量以及元素相对于父元素的偏移量

问题1:如果获取元素距离文档顶部的距离? var rect=$('#elem')[0].getBoundingClientRect(); //获取元素距离文档顶部的距离 var top...
  • liangklfang
  • liangklfang
  • 2015年12月22日 09:30
  • 5704

JavaScript实现拖拽元素对齐到网格(每次移动固定距离)

这几天在做一个拖拽元素的附加功能,就是对齐到网格,实际上就是确定好元素的初始位置,然后拖拽元素时,每次移动固定的距离。让元素都可以在网格内对齐。先上效果图,然后在详细说明一下细节问题 做了一个g...
  • ooim802
  • ooim802
  • 2017年01月09日 20:17
  • 247

JavaScript实现拖拽元素对齐到网格(每次移动固定距离)

转自:http://www.cnblogs.com/chunyangji/archive/2016/11/30/6116888.html   这几天在做一个拖拽元素的附加功能,就是对...
  • zhichao2001
  • zhichao2001
  • 2018年01月06日 20:30
  • 18

CSS 量距离工具 网页制作

  • 2008年11月11日 11:50
  • 67KB
  • 下载

javascript 实现滚动条滚动到一定距离时显示层

  • 2014年02月23日 10:08
  • 1KB
  • 下载

做网页时用来测量距离得小工具

  • 2008年12月26日 22:40
  • 70KB
  • 下载

无定位父元素时offsetParent为body,但是offsetTop/offsetLeft计算距离从html开始

问题1:什么是offsetParent? 解答:返回的是被定位的祖先元素,如果没有被定位的元素是body元素! 问题2:发生margin重叠以后,我们怎么计算到offsetParent的距离? 注意:...
  • liangklfang
  • liangklfang
  • 2016年01月08日 10:21
  • 2569
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript获取元素距离网页的left距离
举报原因:
原因补充:

(最多只允许输入30个字)