JavaScript的DOM操作获取元素周边大小

一、clientLeft 和 clientTop

　　这组属性可以获取元素设置了左边框和上边框的大小，目前只提供了 Left 和 Top 这组，并没有提供 Right 和 Bottom。

<script type="text/javascript">
    window.onload = function(){
        var box = document.getElementById("box");
        alert(box.clientLeft); 
        alert(box.clientTop);
    } 
</script>
<style type="text/css">
    .aaa{
        background:#ccc;
        200px;
        height:200px;
        border:10px solid red;
    }
</style>
</head>
<body>
    <div >测试Div</div>
</body>

二、offsetLeft 和 offsetTop

　　1、这组属性可以获取当前元素相对于父元素的位置。　

　　　　　　获取元素当前相对于父元素的位置，最好将它设置为定位 position:absolute；不要用外边距，否则不同的浏览器会有不同的解释。

　　　　　加上边框和内边距不会影响它的位置，但加上外边据会累加。

<script type="text/javascript">
    window.onload = function(){
           var box = document.getElementById("box");
           alert(box.offsetLeft); //50
           alert(box.offsetTop);//50
    }   
</script>
<style type="text/css">
    /*
     body{
         margin:50px;
    }
    */
    .aaa{
        background:#ccc;
        200px;
        height:200px;
        position:absolute;
        top:50px;
        left:50px;
    }
</style>
</head>
<body>
    <div >测试Div</div>
</body>

　　2、得到父元素

　　　　offsetParent 中，如果本身父元素是<body>，非 IE6,7,8 返回 body 对象，IE 6,7,8返回 html 对象。

　　　　如果两个元素嵌套，如果上父元素没有使用定位 position:absolute，那么 offsetParent 将返回 body 对象或 html 对象。

　　　　所以，在获取 offsetLeft 和 offsetTop 时候，CSS 定位很重要。

<script type="text/javascript">
    window.onload = function(){
        var box = document.getElementById("box");
           alert(box.offsetParent);  //得到父元素，IE6,7,8得到的是HTML跟标签，其他得到的是body标签
    }
    
</script>
<style type="text/css">
</style>
</head>
<body>
    <div >测试Div</div>
</body>

<script type="text/javascript">
    window.onload = function(){
        var box = document.getElementById("box");
           alert(box.offsetParent);//父元素是id为pox的那个div，如果没加定位就变成body了
           alert(box.offsetTop);//20
           alert(box.offsetParent.offsetTop);//50
    }
</script>
<style type="text/css">
    #box{
        background:#ccc;
        200px;
        height:200px;
        margin:20px;
        
    }
    #pox{
        position:absolute;
        top:50px;
        left:50px;
        background:blue;
        400px;
        height:400px;
    }
</style>
</head>
<body>
    <div >
        <div >测试Div</div>
    </div>
</body>

　　如果多层的话，就必须使用循环或递归。

<script type="text/javascript">
    window.onload = function(){
        var box = document.getElementById("box");
           alert(box.offsetParent);//父元素是id为pox的那个div，如果没加定位就变成body了
           alert(offsetLeft(box)+offsetLeft(box.offsetParent));//20
           alert(box.offsetParent.offsetTop);//50    
    }
    function offsetLeft(element) {
        var left = element.offsetLeft;                 //得到第一层距离
        var parent = element.offsetParent;             //得到第一个父元素
        while (parent !== null) {                     //如果还有上一层父元素left += parent.offsetLeft; //把本层的距离累加
            parent = parent.offsetParent;             //得到本层的父元素
        }                                             //然后继续循环
        return left;
    }
</script>
<style type="text/css">
    #box{
        background:#ccc;
        200px;
        height:200px;
        margin:20px;
        
    }
    #pox{
        position:absolute;
        top:50px;
        left:50px;
        background:blue;
        400px;
        height:400px;
    }
</style>
</head>
<body>
    <div >
        <div >测试Div</div>
    </div>
</body>

三、scrollTop 和 scrollLeft

　　这组属性可以获取滚动条被隐藏的区域大小，也可设置定位到该区域。意思就是获取滚动条的位置（有滚动条的前提下）

box.scrollTop; //获取滚动内容上方的位置
box.scrollLeft; //获取滚动内容左方的位置

　　如果要让滚动条滚动到最初始的位置，那么可以写一个函数：

function scrollStart(element) {
　　if (element.scrollTop != 0)
　　　　element.scrollTop = 0;
}

四、getBoundingClientRect()

　　这个方法返回一个矩形对象，包含四个属性：left、top、right和 bottom。分别表示元素各边与页面上边和左边的距离。

<script type="text/javascript">
    window.onload = function(){
        var box = document.getElementById("box");
            alert(box.getBoundingClientRect().top); //元素上边距离页面上边的距离
            alert(box.getBoundingClientRect().right); //元素右边距离页面左边的距离
            alert(box.getBoundingClientRect().bottom); //元素下边距离页面上边的距离
            alert(box.getBoundingClientRect().left); //元素左边距离页面左边的距离
    }
</script>
<style type="text/css">
    #box{
        background:#ccc;
        200px;
        height:200px;
        position:absolute;
        top:50px;
        left:50px;    
    }
</style>
</head>
<body>
    <div >测试Div</div>
</body>

　　IE、Firefox3+、Opera9.5、Chrome、Safari 支持，在 IE 6,7,8中，默认坐标从(2,2)开始计算，导致最终距离比其他浏览器多出两个像素，需要做个兼容。

<script type="text/javascript">
    window.onload = function(){
        var box = document.getElementById("box");
        alert(document.documentElement.clientTop); //IE6,7,8 为 2其他为0
        alert(document.documentElement.clientLeft); //IE6,7,8 为2其他为0
            
        alert(getRect(box).top); //元素上边距离页面上边的距离
        alert(getRect(box).right); //元素右边距离页面左边的距离
        alert(getRect(box).bottom); //元素下边距离页面上边的距离
        alert(getRect(box).left); //元素左边距离页面左边的距离
    }
    function getRect(element) {
        var rect = element.getBoundingClientRect();
        var top = document.documentElement.clientTop;
        var left = document.documentElement.clientLeft;
        return {
            top : rect.top - top,
            bottom : rect.bottom - top,
            left : rect.left - left,
            right : rect.right - left
        }
    }
</script>
<style type="text/css">
    #box{
        background:#ccc;
        200px;
        height:200px;
        position:absolute;
        top:50px;
        left:50px;    
    }
</style>
</head>
<body>
    <div >测试Div</div>
</body>

JavaScript的DOM操作获取元素周边大小

相关推荐