javascript 封装函数,获得高度及左边距

最新推荐文章于 2022-11-18 20:35:15 发布

戴宇琪

最新推荐文章于 2022-11-18 20:35:15 发布

阅读量367

点赞数

分类专栏： WEB前端开发

本文链接：https://blog.csdn.net/yuqidai/article/details/51612578

版权

WEB前端开发专栏收录该内容

48 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javascript 封装函数,获得 高度及左边距</title>
<style>
#div1 { width:1000px; height:500px; background-color:#7A7A7A; marg in:0px auto;padding-top:200px;}
#div2 { width:800px; height:300px; background-color:#F54F52;margin:0px auto; padding-top:200px; }
#div3 { width:500px; height:100px; background-color:#3D9F48;margin:0px auto;}
</style>
<script>
window.onload = function(){
    var oDiv3 = document.getElementById('div3');
    var oDiv2 = document.getElementById('div2');
    var oDiv1 = document.getElementById('div1');
/*  
    var iTop = 0;
    var obj = oDiv3;
    while(obj){
        iTop += obj.offsetTop;
        obj = obj.offsetParent;
        }
    alert(iTop);
    */
    
    alert(getPos(oDiv3).top);
    
    function getPos(obj){
        var pos = {left:0,top:0};
        while(obj){
            pos.left += obj.offsetLeft;
            pos.top += obj.offsetTop;
            obj = obj.offsetParent;
            }
        return pos;
        }
    
    }
</script>
</head>
<body>
<div id="div1">
    <div id="div2">
        <div id="div3"></div>
    </div>
</div>
</body>
</html>

戴宇琪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript 封装函数,获得高度及左边距

javascript 封装函数,获得高度及左边距#div1 { width:1000px; height:500px; background-color:#7A7A7A; marg in:0px auto;padding-top:200px;}#div2 { width:800px; height:300px; background-color:#F54F52;margin:0px aut
复制链接

扫一扫