JavaScript—— scroolleft----offsetleft 系列的含義以及瀏覽器兼容問題

時間 2019-11-11

標籤 javascript scroolleft offsetleft 系列含義以及瀏覽器兼容問題欄目 JavaScript 简体版

原文原文鏈接

clientWidth：獲取對象的內容可視區域的寬度，即clientWidth=width+padding，不包括滾動條。html

clientHeight：獲取對象的內容可視區域的高度，即clientHeight=height+padding，不包括滾動條。spa

scrollWidth：獲取對象內容的實際寬度，即對象的滾動寬度。3d

scrollHeight：獲取對象內容的實際高度，即對象的滾動高度。code

offsetWidth：獲取對象的寬度，即offsetWidth=width+padding+scrollbar（滾動條）+border。也能夠寫成offsetWidth=clientWidth+scrollbar（滾動條）+border。htm

offsetHeight：獲取對象的寬度，即offsetHeight=height+padding+scrollbar（滾動條）+border。也能夠寫成offsetHeight=clientHeight+scrollbar（滾動條）+border。對象

clientTop：獲取對象的上邊框的寬度。blog

clientLeft：獲取對象的左邊框的寬度。ip

scrollTop：設置或獲取對象最頂端和對象內容的最頂端之間的距離。utf-8

scrollLeft：設置或獲取對象最左端和對象內容的最左端之間的距離。get

offsetTop：獲取對象相對於版面或由offsetParent屬性指定的父座標的頂部位置。

offsetLeft：獲取對象相對於版面或由offsetParent屬性指定的父座標的左側位置。

offsetParent：指的是最近的定位祖先元素。若是沒有祖先元素是定位的話，會指向body元素。

td的offsetParent是TABLE，無論table是否有定位屬性。td裏面的元素的offsetParent爲第一個定位的parents元素，若是沒有定位元素呢，分爲三種：

若是該元素沒有定位時:TD
若是該元素有定位，table都沒有定位的話，IE6中＝HTML,FF,IE8=BODY
若是該元素和table都定位的話：TABLE

在IE6和IE7中對offsetParent解釋有個小bug，當祖先元素都不是定位元素且自己是定位元素的時候返回document.documentElement，其餘狀況返回document.body!!

offsetTop、offsetLeft

（1）當對象的offsetParent屬性指向的是body時，offsetLeft和offsetTop指的是對象的邊框（不包括邊框）到頁面邊緣的距離。在FireFox中，會減去body的邊框的寬度。

（2）當對象的offsetParent屬性指向的是最近的定位祖先元素時，offsetLeft和offsetTop指的是對象的邊框（不包括邊框）到最近的定位祖先元素的邊框（不包括邊框）的距離。在IE中，會將最近的定位祖先元素的邊框寬度算在內。

示例代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>鬼眼邪神的博客</title>
        <meta name="author" content="鬼眼邪神"/>
        <meta name="description" content="鬼眼邪神的博客，http://cyg7561.blog.163.com/"/>
        <style>
            * {
                margin:0;
                padding:0;
            }
            body {
                margin-left:30px;
                border:5px solid #000;
                background:yellow;
                height:350px;
            }
            .d {
                float:left;
                position:relative;
                margin:20px;
                padding:20px;                
                width:200px;
                height:200px;
                border:20px solid #000;
                background:red;
                overflow:auto;
            }
            .con {
                float:left;
                width:400px;
                height:80px;
                margin-left:25px;
                border:10px solid blue;
                background:green;
            }
            .zi {
                float:left;
                margin-top:20px;
                width:200px;
                height:300px;
            }
        </style>
        <script>
            (function(){
                window.onload=function(){
                    var d=document.getElementById("d");
                    var con=document.getElementById("con");
                    var bo=document.getElementById("bo");
                    var zi=document.getElementById('zi');
                    zi.innerHTML=
                        "d.clientWidth="+d.clientWidth+"<br/>"+
                        "d.clientHeight="+d.clientHeight+"<br/>"+
                        "d.scrollWidth="+d.scrollWidth+"<br/>"+
                        "d.scrollHeight="+d.scrollHeight+"<br/>"+
                        "d.offsetWidth="+d.offsetWidth+"<br/>"+
                        "d.offsetHeight="+d.offsetHeight+"<br/>"+
                        "d.clientTop="+d.clientTop+"<br/>"+
                        "d.clientLeft="+d.clientLeft+"<br/>"+
                        "d.scrollTop="+d.scrollTop+"<br/>"+
                        "d.scrollLeft="+d.scrollLeft+"<br/>"+
                        "d.offsetTop="+d.offsetTop+"<br/>"+
                        "d.offsetLeft="+d.offsetLeft+"<br/>"+
                        "con.offsetTop="+con.offsetTop+"<br/>"+
                        "con.offsetLeft="+con.offsetLeft+"<br/>";
                }
            })();
        </script>
    </head>

    <body id="bo">
        <div class="d" id="d">
            <div class="con" id="con">
                <a href="http://cyg7561.blog.163.com/" title="鬼眼邪神的博客">鬼眼邪神的博客</a>
            </div>
        </div>
        <div class="zi" id="zi">
            
        </div>
    </body>
</html>