javascript的offsetTop[Left]获得左和上距离 clientWidth,offsetWidth

最新推荐文章于 2019-05-15 16:29:19 发布

戴宇琪

最新推荐文章于 2019-05-15 16:29:19 发布

阅读量295

点赞数

分类专栏： WEB前端开发

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

版权

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

48 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>javascript的offsetTop[Left]获得左和上距离</title>
<style>
#div1 { width:1000px; height:500px; background-color:#7A7A7A; margin:0px auto;}
#div2 { width:800px; height:300px; background-color:#F54F52;margin:0px auto; }
#div3 { width:500px; height:100px; background-color:#3D9F48;margin:0px auto;}
</style>
<script>
window.onload = function(){
    var Div1 = document.getElementById('div1');
    var Div2 = document.getElementById('div2');
    var Div3 = document.getElementById('div3');
    
    //alert(Div1.clientWidth);  //可视区宽 + padding
    //alert(Div1.offsetWidth);  //占位宽 + padding + border
    
    //alert(Div3.offsetTop);
    //alert(Div3.offsetLeft);
    //alert(Div3.offsetTop);
    //alert(Div3.offsetTop);
    
    }
</script>
</head>
<body>
<div id="div1">
    <div id="div2">
        <div id="div3"></div>
    </div>
</div>
</body>
</html>