offsetLeft, offsetTop以及postion().left , postion().top有神馬區別 - diligenceday－IT工程師數位筆記本

文章出處

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
　　for test,回答標題：
　　　　offsetLeft是指當前元素的外邊框到包含元素的內邊框;
　　　　position().left是指當前元素的margin(不包含margin)到定位元素的border-box(不包含border,但是包含padding),即pdding-box;
　　　　都是從父級的padding-box開始的

</title>
<script src="http://zeptojs.com/zepto.js"></script>
</head>
<body>
    <style type="text/css">
        body {
            border:20px solid #CCC;
            margin:30px;
            padding:10px;
            background:#EEE;
            position:relative;
        }
        #test {
            width:800px;
            height:600px;
            margin:40px;
            padding:20px;
            border:5px solid #888;
            background:#F60;
            position:relative;
        }
        #test-div2{
            width:200px;
            background:#999;
            border:#fff solid 10px;
            padding:20px;
            margin:30px;
        
        }
    </style>
    <div id="test"></div>
    <div>
        <pre>    
        //在火狐和chrome和IE瀏覽器上的offsetLeft都是當前元素的marginLeft + offsetParent的paddingLeft,但是有一種情況下chrome的結果和[IE|FF]不一致,
        //那就是在offsetParent為body的情況下, 在chrome下offsetParent為body的話offsetLeft會算上body.borderWidth
        
        //通過zepto的el.position()獲取的left和top值;            
        //這個是指從父級的contentBox到子元素的margin-box(沒有包含margin);            
        $("#test-div2").position()
        Object {top: 242, left: 20}
        $("#test").position()
        Object {top: 40, left: 40}
        //因為是body,所以zepto計算的就有問題(好爛的解釋方式),布局盡量清楚點,惹不起還怕躲不起嗎么么噠;
        $("body").position()
        Object {top: -20, left: -20};
        
        //難懂的東西自己去寫就好懂了，要么看了看了越看越暈的;
        知識點:通過zepto獲取的 position() 返回的LEFT和TOP是相對父級元素的LEFT和TOP的值 .這個值是通過 getBoundingClientRect 的差值(父級的border + 父級的padding + 中間的各種寬度么么噠 + 子元素的margin) 減去 - 父級的border - 子元素的maring (符合一個元素的left或者是top是父級元素的content-box 到子元素的margin的距離);
        知識點：getBoundingClientRect()獲取的也是相對界面的值,jQ和zepto的position實現就是根據getBoundingClientRect(),getBoundingClientRect是從元素的border-box開始的(包含border-box)到界面左上角的距離;
        知識點：chrome的開發者工作的實時查看margin,border,padding,content調試的顏色是從淺入深的;
            {
                margin : 橘色,
                border : 灰色,
                padding : 褐色,
                content : 偏藍色
            }
            火狐
            {
                margin : 黃色,
                border : 偏黑色,
                padding : 紫色,
                content : 偏藍色
            }
        </pre>
    </div>
    <div></div>
    <script>
        window.onload = function() {
            var test = document.getElementById("test");
            test.innerHTML = "<p>Browser:" + navigator.userAgent + "</p>" +
                "<p>offsetWidth:" + test.offsetWidth + "</p>" +
                "<p>offsetHeight:"+test.offsetHeight+"</p>"+
                "<p>offsetLeft:"+test.offsetLeft+"</p>"+
                "<p>offsetTop:"+test.offsetTop+"</p>"+
                "<br><div id=\"test-div2\"></div>";
                //在父元素是body的情況下;
                //chrome下的:
                    //offsetLeft為  :  子元素的margin-left  + body.borderLeft + body.paddingLeft
                //ff下得 :
                    //offsetLeft為  ：  子元素的margin-left + body.paddingLeft
                /*
                    在IE8/9/10及Chrome中,offsetLeft = (body的margin-left)+(body的border-width)+(body的padding-left)+(當前元素的margin-left);    
    　　                在FireFox中，offsetLeft = (body的margin-left)+(body的padding-left)+(當前元素的margin-left)
                */
            var div2 = document.getElementById("test-div2");
            div2.innerHTML = "<p>Browser:" + navigator.userAgent + "</p>" +
                "<p>"+div2.offsetParent.tagName+"</p>"+
                "<p>offsetWidth:" + div2.offsetWidth + "</p>" +
                "<p>offsetHeight:"+div2.offsetHeight+"</p>"+
                "<p>offsetLeft:"+div2.offsetLeft+"</p>"+
                "<div style='left:200px;top:200px' id='div3'>div</div>";
                //在父元素不是body的情況下;
                //chrome下得 :
                    //offsetLeft也為的margin-left(包含margin-left)到相對父級的padding-left(包含padding-left);
                    //CODE用代碼表示  ==〉〉  offsetLeft = offset.margin-left + el.padding-left
                //ff下得 :
                    //offsetLeft為當前元素的margin-left(包含margin-left)到相對父級的padding-left(包含padding-left);
                    //CODE用代碼表示  ==〉〉offsetLeft = offset.margin-left + el.padding-left
        };
    </script>
</body>
</html>

        網頁可見區域寬： W3C標準:document.documentElement.clientWidth ; IE低版本:document.body.clientWidth;
        (
        	PS： document.documentElement.clientWidth是指不包含滾動條的寬度,
        	window.innerWidth是包含滾動條長度的用戶寬度,
            window.outerWidth是指window.innerWidth加上包含外部邊框的長度;
            如果一個元素出現了垂直滾動條,那么這個元素的clientHeight還是offsetHeight-border*2, 只有父級的clientHeight才是可視區的高度;
            如果該元素隱藏了,就什么值都獲取不到了;
        )

        網頁可見區域高： W3C標準:document.documentElement.clientHeight ; IE低版本:document.body.clientHeight;

        (PS： 因為現代瀏覽器的html為用戶界面, body元素是一個正常的元素, 滾動時出現在html元素的,
        	在IE低版本下面的html是隱藏的,body是出現滾動的元素);

        網頁可見區域寬： W3C標準:document.body.offsetWidth   (包括border和padding的寬); 

            知識點==>> W3C標準:offsetWidth === contentWidth(內容寬) + border-width*2 + padding-width*2;
        網頁可見區域高： 同上;
        W3C標準下的width === 內容區域的寬;
		IEquirk模式width === 包含paddingw和border的寬度;

        用戶高度:  clientHeight不包含margin和border的高度, 即為padding值加上content-height;

        clientLeft: 其實這個就是border-left的長度, 跟margin居然沒有關系,感覺沒有存在的意義(WEBKIT測試結果)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>計算后樣式</title>
</head>
<body>


    <style type="text/css">
        body {
            border:20px solid #CCC;
            margin:30px;
            padding:10px;
            background:#EEE;
            position:relative;
        }
        #test {
            width:800px;
            height:600px;
            margin:40px;
            padding:20px;
            border:5px solid #888;
            background:#F60;
            position:relative;
        }
        #test-div2{
            width:200px;
            background:#999;
            border:#fff solid 10px;
            padding:20px;
            margin:30px;
        
        }
    </style>
    <div id="test"></div>
    <script>
    
        window.onload = function() {
            var test = document.getElementById("test");
            test.innerHTML = "<p>Browser:" + navigator.userAgent + "</p>" +
                "<p>offsetWidth:" + test.offsetWidth + "</p>" +
                "<p>offsetHeight:"+test.offsetHeight+"</p>"+
                "<p>offsetLeft:"+test.offsetLeft+"</p>"+
                "<p>offsetTop:"+test.offsetTop+"</p>"+
                "<br><div id=\"test-div2\"></div>";
            var div2 = document.getElementById("test-div2");
            div2.innerHTML = "<p>Browser:" + navigator.userAgent + "</p>" +
                "<p>"+div2.offsetParent.tagName+"</p>"+
                "<p>offsetWidth:" + div2.offsetWidth + "</p>" +
                "<p>offsetHeight:"+div2.offsetHeight+"</p>"+
                "<p>offsetLeft:"+div2.offsetLeft+"</p>"+
                "<div style='left:200px;top:200px' id='div3'>div</div>";
        };
        /*現在chrome下測試所有的值;
            left,top:為元素的margin外邊距到包含容器的padding的像素值;
            如果容器是body的話：
                offsetLeft包含了body的borderLeft;
            如果包含容器不是body的話：
                offsetLeft, offsetTop為元素的外邊框邊距到包含容器的內邊框邊距的像素值;
            clientLeft為borderLeft;
            沒有滾動的情況下:
                clientWidth為元素的內容寬度加上兩邊的padding;
                clientHeight同理;
                沒有滾動的情況下你不要計算scrollWidth，因為瀏覽器之間的定義不一樣， 直接認為和clientWidth一樣好了;
            有滾動的情況下：
                clientWidth為視口的寬度
                scrollWidth為內部滾動區域的長度;
                scrollLeft為隱去的左側距離;            
        */
    </script>
    </script>
 </body>
</html>