js獲取元素寬高、位置相關知識匯總

常見clientWidth、clientHeight、offsetWidth、offsetLeft，clientX、scrollTop等詞語，比較混亂，現在總結下他們的區別。

1. clientWidth：元素的寬度（width+padding），offsetWidth相比clientWidth，多個border的值 ( width+padding+border)。clientHeight 、 offsetHeight略

//某個元素的寬度和高度
var div1 = document.getElementById('div1');
console.log('元素的寬width+padding',        div1.clientWidth );

//body的寬度
console.log('body的寬',document.body.clientWidth);

//可視區的寬度，也就是html的寬度
console.log('可視區的寬', document.documentElement.clientWidth );

//可視區的寬度高度:你可以調整瀏覽器窗口大小調整的，body的高度不設置的話是根據內容來的，內容少，瀏覽器不出現滾動條，body的高度小於可視區高度，內容多，瀏覽器出現滾動條，body的高度大於可視區高度。

但是css3有個屬性：box-sizing

box-sizing: content-box|border-box|inherit

比如，div1設置

    <style type="text/css">
        #div1 {
            width: 200px;
            height: 200px;
            padding: 50px;
            border: 10px solid #000000;
        }
    </style>

box-sizing默認是content-box，就是width不包含padding和border的模式，測試，IE7+及其他瀏覽器正常，顯示 clientWidth為50+200+50=300，offsetWidth為10+50+200+50+10=320，多了2邊的border。

IE6下clientWidth為180，offsetWidth為200，因為6下的width是包含padding和border的，但是沒人用ie6了，不細說

但是說明一個問題，clientWidth顯示的很准確，就是實際width+padding的值，ie6下這個值比較小，也顯示小了。

div1加上 box-sizing:border-box;再看看什么反應，IE7不認識 box-sizing:border-box; 出現結果和不加 box-sizing:border-box;一樣，其他瀏覽器都是 clientWidth為180，offsetWidth為200。

結論就是：

1.clientWidth的值挺准確的，去掉邊框的“盒子”占多少像素就顯示多少像素。box-sizing的設置影響到了實際顯示，也自然的影響到了clientWidth的值。

2.offsetWidth就是clientWidth加上兩邊border

3.clientWidth的值可以讀，但是不能寫。例如寫： div1.clientWidth = 500; div1並不會變大，有些瀏覽器報警告或錯誤。

 

 

2. clientX，clientY是事件中的概念， 鼠標點擊時候距離可視區的左側和上側坐標，數據是在事件的細節的event對象中

        document.onclick = function (ev) {
            //IE和谷歌用window.event
            //火狐等用事件函數的第一個參數
            var ev = ev || window.event;
            console.log(ev.clientX,ev.clientY);            
        }

 

3.scrollTop、scrollLeft 是指頁面內容太長，有滾動條了，已經滾動的距離。上面clientX和clientY都是針對可視區的，但是很多時候，我們想知道的是針對頁面內容的距離，才方便我們下一步定位等操作，所以要結合scrollTop、scrollLeft使用

但是，但是，要注意：scrollTop它們存在兼容性問題。

瀏覽器出現滾動條是誰的？ 答：只有谷歌瀏覽器認為滾動條是body的（document.body.scrollTop），其他瀏覽器都認為是html的，也就是可視區的（document.documentElement.scrollTop），為了在有限的范圍顯示大頁面，才出現的滾動條。為了兼容，代碼如下：

        
        //有scrollTop和scrollLeft,沒有scrollBottom和scrollRight
        document.onscroll = function(){
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            console.log(scrollTop);
        }
        

 

4. 待續