clientTop、clientWidth、offsetTop、offsetWidth、scrollTop

 

<div id="drag" class="drag">drag me</div>

 

<script type="text/javascript">
    window.onload = function(e) {
        e = e || window.event;
        var drag = O('drag');
        console.log(drag.offsetWidth);
    }

    function O(id) {
        return document.getElementById(id);
    }
</script>

drag.style.width = drag實際寬度　　　　　　　　　　　　　　　　= 500　　　　　　　　　　　　　　　　　　　 對應jQuery的width()　　

drag.clientLeft  = border　　　　　　　　　　　　　　　　　　 = 10

drag.clientWidth = padding + drag實際寬度　　　　　　　　　　= 20 + 500 + 20 = 540                  對應jQuery的innerWidth()

drag.offsetLeft  = 一、元素絕對定位後：元素border最左邊到父元素最左邊的距離（包括自身margin和父元素padding、border、margin）
　　　　　　　　　　　 二、未絕對定位，就 = parent margin + parent padding + self margin （注意不包括parent border）

drag.offsetWidth = border + padding + drag實際寬度 　　　　= 10 + 20 + 500 + 20 + 10 = 560　　　　　對應jQuery的outerWidth()

--------------------------------------------------------------------------------

drag.scrollTop   = 被捲上去的高度

視口高度、寬度（可視區域）　　=　　window.innerHeight、window.innerWidth
瀏覽器高度、寬度　　　　　　　=　　window.outerHeight、window.outerWidth

網頁被捲上去的高度 =　　window.pageYOffset = window.scrollY
　　　　　　　　　 =　　document.body.scrollTop（chrome） + document.documentElement.scrollTop（火狐）
　　　　　　　　　 =　　$(document).scrollTop()（jQuery）

網頁高度         =  document.documentElement.scrollHeight  =  document.body.scrollHeight    =  $(document).height()   

event.clientX 定義：鼠標事件源距離瀏覽器左邊框距離

event.clientY 定義：鼠標事件源距離瀏覽器上邊框距離