关闭

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

标签: javascriptdivxhtmlserverfunction
3141人阅读 评论(0) 收藏 举报
分类:
<!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

1
1

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:76073次
    • 积分:956
    • 等级:
    • 排名:千里之外
    • 原创:15篇
    • 转载:27篇
    • 译文:0篇
    • 评论:5条
    文章分类