JavaScript及jQuery中的各種寬高屬性圖解

ipilipala 2016-12-15

展开全文

原文鏈接 http://blog./2016/12/13/js-props
聲明：本文根據慕課網學習視頻整理

強烈建議打開控制台自己動手練習一遍，這樣印象才會深刻

第一部分 JavaScript中的寬高屬性

一、與window相關的寬高屬性

1.1 window.location和document.location

window對象的location屬性引用的是location對象，表示該窗口中當前顯示文檔的URL
document的對象的location屬性也是引用location對象
所以 window.location === document.location //true

1.2 window.screen

window.screen包含有關用戶屏幕的信息。它包括：
- window.screen.width
- window.screen.height
- window.screen.availHeight
- window.screen.availWidth
- window.screenTop
- window.screenLeft

window.screen

1.3 與window相關的寬高

window.innerWidth 內部的寬度
window.innerHeight 內部的高度
window.outWidth 外部的寬度
window.outHeight 外部的高度

與window相關的寬高

二、與document相關的寬高屬性

2.1與client相關的寬高

document.body.clientWidth 元素寬度（可視內容區+內邊距）
document.body.clientHeight元素高度（可視內容區+內邊距）

該屬性指的是元素的可視部分寬度和高度，即padding+content
如果沒有滾動條，即為元素設定的寬度和高度
如果出現滾動條，滾動條會遮蓋元素的寬高，那麼該屬性就是其本來寬高減去滾動條的寬高

example1：

body{ 
    border: 20px solid #000; 
    margin: 10px; 
    padding: 40px; 
    background: #eee; 
    height: 350px; 
    width: 500px; 
    overflow: scroll; 
} 
console.log(document.body.clientWidth);  // 350+padding(80) = 430
console.log(document.body.clientHeight);  // 500 + padding(80) = 580

example2: 在div中添加文字，指導出現滾動條

#exp2 {
    width:200px;
    height:200px;
    background:red;
    border:1px solid #000;
    overflow:auto;
}

var test = document.getElementById("exp2");

console,log(test.clientHeight); // 200
console.log(test.clientWidth); //

window7下test.clientWidth

小結clientWidth和clientHeight
- 無padding無滾動： clientWidth = 盒子的width
- 有padding無滾動： clientWidth = 盒子的width + 盒子的padding * 2
- 有padding有滾動： clientWidth = 盒子和width + 盒子的padding * 2- 滾動軸寬度

document.body.clientLeft
document.body.clientTop

這兩個返回的是元素周圍邊框的厚度，如果不指定一個邊框或者不定位該元素，它的值就是0

例：

body{ 
    border: 20px solid #000; 
    margin: 10px; 
    padding: 40px; 
    background: #eee; 
    height: 350px; 
    width: 500px; 
    overflow: scroll; 
} 
console.log(document.body.clientLeft);  // 20
console.log(document.body.clientTop);  // 20

小結clientLeft和clientTop

這一對屬性是用來讀取元素的border的寬度和高度的
- clientTop = border-top
- clientLeft = border-left

2.2 與offset相關的寬高

document.body.offsetWidth（元素的border+padding+content的寬度）
document.body.offsetHeight（元素的border+padding+content的高度）

該屬性和其內部的內容是否超出元素大小無關，只和本來設定的border以及width和height有關

例：

body{ 
    border: 20px solid #000; 
    margin: 10px; 
    padding: 40px; 
    background: #eee; 
    height: 350px; 
    width: 500px; 
    overflow: scroll; 
} 
console.log(document.body.offsetWidth);  // 470 = padding*2 + 350 + border*2
console.log(document.body.offsetHeight);  // 620 = padding*2 + 500 + border*2

小結offsetWidth和offsetHeight

無padding無滾動無border
- offsetWidth = clientWidth = 盒子的寬度
有padding無滾動有border
- offsetWidth = 盒子的寬度 + 盒子padding2 + 盒子邊框2 = clientWidth + 邊框寬度*2
有padding有滾動，且滾動是顯示的，有border
- offsetWidth = 盒子寬度 + 盒子padding2 + 盒子邊框2 = clientWidth + 滾動軸寬度 + 邊框寬度*2

document.offsetLeft
document.offsetTop

瞭解這兩個屬性我們必須先瞭解它，什麼是offsetParent

如果當前元素的父級元素沒有進行CSS定位（position為absolute或relative）,offsetParent為body.
假如當前元素的父級元素中有CSS定位，offsetParent取最近的那個父級元素

offsetLeft的兼容性問題：

在IE6/7中
- offsetLeft = offsetParent的padding-left + 當前元素的margin-left
在IE8/9/10以及chrome中
- offsetLeft = offsetParent的margin-left + offsetParent的border寬度 + offsetParent的padding-left + 當前元素的margin-left
在FireFox中
- offsetLeft = offsetParent的margin-left + 當前元素的margin-left + offsetParent的padding-left

例：

body{ 
    border: 20px solid #000; 
    margin: 10px; 
    padding: 40px; 
    background: #eee; 
    height: 350px; 
    width: 500px; 
    overflow: scroll; 
} 

#exp {
   width:400px;
   height:200px;
   padding:20px;
   margin:10px;
   background:red;
   border:20px solid #000;
   overflow:auto;
}
var div = document.getElementById("exp");

在IE8/9/10以及chrome中：
- div.offsetLeft = 本身的margin10 + 父級元素的padding40 + margin10 + border20 = 80
- div.offsetTop = 本身的margin10 + 父級元素的padding40 + margin10 + border20 = 80
在FireFox：（相比chrome中少了border）
- div.offsetLeft = 本身的margin10 + 父級元素的padding40 + margin10 = 60
- div.offsetTop = 本身的margin10 + 父級元素的padding40 + margin10 = 60
在IE6/7中：（相比在FireFox，不但少了border還少了父級元素的margin）
- div.offsetLeft = 本身的margin10 + 父級元素的padding40 = 50
- div.offsetTop = 本身的margin10 + 父級元素的padding40 = 50

2.3與scroll相關的寬高 (實際項目中用的最多)

document.body.scrollWidth
document.body.scrollHeight

document.body的scrollWidth和scrollHeight與div的scrollWidth和scrollHeight是有區別的

例：

body{ 
    border: 20px solid #000; 
    margin: 10px; 
    padding: 40px; 
    background: #eee; 
    height: 350px; 
    width: 500px; 
    overflow: scroll; 
}

document.body.scrollHeight; // 
document.body.scrollWidth; //

當給定寬高小於瀏覽器窗口的寬高
- scrollWidth = 通常是瀏覽器窗口的寬度
- scrollHeight = 通常是瀏覽器窗口的高度
當給定寬高大於瀏覽器窗口的寬高，且內容小於給定寬高的時候
- scrollWidth = 給定寬度 + 其所有的padding + margin + border
- scrollHeight = 給定高度 + 其所有的padding + margin + border
當給定寬高大於瀏覽器窗口寬高，且內容大於給定寬高
- scrollWidth = 內容寬度 + 其所有的padding + margin + border
- scrollHeight = 內容高度 + 其所有的padding + margin + border

在某div中的scrollWidth和scrollHeight

無滾動軸時：
- scrollWidth = clientWidth = 盒子寬度 + 盒子padding*2

無滾動軸時

有滾動軸時：
- scrollWidth = 實際內容的寬度 + padding*2
- scrollHeight = 實際內容的高度 + padding*2

有滾動軸時

document.body.scrollLeft
document.body.scrollTop

與前面不同的是，這對屬性是可讀寫的，指的是當元素其中的超出其寬高的時候，元素被捲起來的高度和寬度

#exp {
   width:400px;
   height:200px;
   padding:20px;
   margin:10px;
   background:red;
   border:20px solid #000;
   overflow-y:scroll;
}

var mydiv = document.getElementById("exp");

mydiv.scrollTop ;  //默認情況下是0 
mydiv.scrollLeft ; //默認情況下是0 

//可以改寫它

mydiv.scrollTop = 20;
console.log(mydiv.scrollTop)

scrollTop和scrollLeft

obj.style.width和obj.style.height

對於一個DOM元素，它的style屬性返回的是一個對象，這個對象的任意一個屬性是可讀寫的，style.width等於css屬性中的寬度。style.height等於css屬性中的高度

2.4 documentElement和body的關係

是父子級的關係

body{ 
    border: 20px solid #000; 
    margin: 10px; 
    padding: 40px; 
    background: #eee; 
    height: 350px; 
    width: 500px; 
    overflow: scroll; 
}

#exp {
   width:400px;
   height:200px;
   padding:20px;
   margin:10px;
   background:red;
   border:20px solid #000;
   overflow-y:scroll;
}

console.log(document); //document
console.log(document.documentElement); //html
console.log(document.body); //body

Paste_Image.png

兼容問題推薦使用獲取瀏覽器窗口可視區域大小

document.body.clientWidth || document.documentElement.clientWidth;
document.body.clientHeight || document.documentElement.clientHeight;

三、Event對象的5種坐標

Event對象的5種坐標

例：

<div id="example" 
style="width: 200px;height: 200px;background: red;margin: 100px auto;"></div>

var example = document.getElementById("example");
example.onclick = function(e){
    console.log("clientX "+e.clientX + " : " + " clientY "+e.clientY);
    console.log("screenX "+e.screenX + " : " + " screenY "+e.screenY);
    console.log("offsetX "+e.offsetX + " : " + " offsetY "+e.offsetY);
    console.log("pageX "+e.pageX + " : " + " pageY "+e.pageY);
    console.log("x "+e.x + " : " + " y "+e.y);
}

Event對象的5種坐標

四、 js各種寬高的應用

example1：可視區域加載

用來解決offset的兼容性難問題

<div id="example1" ></div>

#example1 {
            width: 500px;
            height: 350px;
            background: red;
            margin: 1000px auto 0 auto;
        }
        @-webkit-keyframes fadeInLeft{
            0%{
                opacity: 0;
                transform: translate3d(-100%,0,0);
            }
            100%{
                opacity: 1;
                transform: none;

            }
        }
            .fadeInLeft {
                animation-name: fadeInLeft;
                animation-duration: 2s;
            }

function showDiv(){
            var example = document.getElementById("example");
            var clients = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;//可視區域的高度
            var divTop = example.getBoundingClientRect().top;
            if(divTop <= clients){
                example.classList.add("fadeInLeft");
                              //  這裡可以通過setAttribute設置圖片的src按需加載
            }
            document.title = clients+"---"+divTop;
        }

window.onscroll = showDiv;

在線演示

example2：網頁滾動到頂部或者底部

<div id="example2" ></div>

#example2 {
            width: 500px;
            height: 350px;
            background: red;
            margin: 1000px auto 0 auto;
}

function scrollTopOrBottom(){
            var example2 = document.getElementById("example");
            var clients = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;//可視區域的高度，兼容性寫法
            var scrollTop = document.body.scrollTop;
            var wholeHeight = document.body.scrollHeight;
            if(clients + scrollTop >= wholeHeight){
                alert("我已經到了底部!");
                              // 這裡可以調用Ajax分頁加載到頁面中，實現多頁加載功能
            }else if(scrollTop == 0){
                alert("我已經到了頂部了!");

            }
            document.title = (clients + scrollTop)+"---"+wholeHeight+"--"+scrollTop;
        }

window.onscroll = scrollTopOrBottom;

在線演示

example3：DIV滾動到底部加載

<div id="example3" >
            DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載
            DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載
            DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載
            DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載
            DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載
            DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載
</div>

#example3 {
            width: 500px;
            height: 400px;
            background: red;
            margin: 10px auto;
            padding: 10px;
            overflow-y: scroll;
}

var div = document.getElementById("example3");
        function divScroll(){

            var wholeHeight = div.scrollHeight;//滾動區域高度
            var divScrollTop = div.scrollTop;//捲上去的那部分高度
            var divHeight = div.clientHeight; //div的可視區域的高度


            if(divScrollTop + divHeight >= wholeHeight){
                alert("我已經到了底部!");
               // 這裡可以在div中通過滾動加載分頁按需顯示
            }else if(divScrollTop == 0){
                alert("我已經到了頂部了!");
            }
            document.title = (divScrollTop + divHeight)+"---"+wholeHeight+"--"+divScrollTop;
}

div.onscroll = divScroll;

在線演示

example4：計算滾動軸的寬度

    //獲取滾動軸的寬度
        function getScrollBar(){
            var el = document.createElement("p");
            var styles = {
                width:"100px",
                height:"100px",
                overflowY:"scroll"
            };
            for (var prop in styles){
                el.style[prop] = styles[prop];//把 styles上的屬性全部遍歷拷貝到el.style上

            }
            document.body.appendChild(el);
            var scrollBarWidth = el.offsetWidth - el.clientWidth;
            el.remove();
            return scrollBarWidth;
        }
        alert(getScrollBar());//17

在線演示

五、js中的寬高屬性總結

Paste_Image.png

document相關的寬高

第二部分 jQuery中的寬高屬性

一、jquery相關寬高介紹

1.1 width()
- 特殊元素window.document只可以讀，普通元素可以讀寫，width()返回結果無單位，css("width")的結果有單位

width--height

width

1.2 innerWidth()
- 包含padding（不推薦window,document調用）
1.3 innerHeight()

innerWidth--innerHeight

innerWidth

1.4 outerWidth()
- 包含padding和border，當傳true時包含marging，不傳時不包含marging（不推薦window,document調用）
1.5 outerHeight()

outerWidth--outerHeight

outerWidth

1.6 scrollLeft():
- 相對於水平滾動條左邊的距離，如果滾動條非常左、或者元素不能被滾動，這個值為0；
1.7 scrollTop():
- 相對於垂直滾動條上邊的距離，如果滾動條非常上、或者元素不能被滾動，這個值為0；
1.8 .offset():
- 相對於document的當前坐標值(相對於body左上角的left,top的值)；
1.9 .position():
- 相對於offset parent的當前坐標值(相對於offset parent元素的左上角的left、top的值)

offset和position區別

二、jquery相關寬高舉例

2.1 exmaple1

example1

    <div class="parentDiv">
        <div class="childrenDiv"></div>
    </div>

html,body {
    margin:10px;
    border:5px solid red;
    padding:20px;
}
.parentDiv {
    width:800px;
    height:500px;
    margin:5px auto;
    background:#FF6600;
    border:5px dashed green;padding:30px;position:relative;

}
.childrenDiv {
    width:300px;
    height:500px;
    margin:5px auto;
    background:yellow;
    border:5px solid black;
    padding:5px;
    box-sizing:border-box;/*包括padding和border的值*/
}

//特殊元素的高度
//window  document
console.log("$(window).height()"+$(window).height());
console.log("$(document).height()"+$(document).height());

//innerHeight 
console.log("$(window).innerHeight()"+$(window).innerHeight());
console.log("$(document).innerHeight()"+$(document).innerHeight());

//普通child元素的高度

//480 = 500 - border*2 - padding*2 (因為設置了box-sizing，box-sizing把border和padding的值計算了進去)
console.log('$(".childrenDiv").height()'+ $(".childrenDiv").height());

//490 = 500 - border*2 - padding*2（innerHeight不包括padding）
console.log('$(".childrenDiv").innerHeight()'+ $(".childrenDiv").innerHeight());

//500 = 500  不包括margin
console.log('$(".childrenDiv").outerHeight()'+ $(".childrenDiv").outerHeight());

//510 = 500 + margin true包括margin
console.log('$(".childrenDiv").outerHeight()'+ $(".childrenDiv").outerHeight(true));

//scrollTop

$(window).scroll(function(){
    document.title = "scrollTop  "+$(this).scrollTop();
});

// jquery寬高演示之offset和position

console.log('$(".childrenDiv").offset().top '+$(".childrenDiv").offset().top);
console.log('$(".childrenDiv").offset().left '+$(".childrenDiv").offset().left);
console.log('$(".childrenDiv").position().top '+$(".childrenDiv").position().top);
console.log('$(".childrenDiv").position().top '+$(".childrenDiv").position().left);

Paste_Image.png

offset-position

在線演示

三、jquery各種寬高應用

3.1 jquery可視區域加載

<div id="example" ></div>

#example {
            width: 500px;
            height: 350px;
            background: red;
            margin: 1000px auto 0 auto;
        }
        @-webkit-keyframes fadeInLeft{
            0%{
                opacity: 0;
                transform: translate3d(-100%,0,0);
            }
            100%{
                opacity: 1;
                transform: none;

            }
        }
            .fadeInLeft {
                animation-name: fadeInLeft;
                animation-duration: 2s;
            }

        $(window).scroll(function(){
            var ks_area = $(window).height();//可視區域高度
            var scrollHeight = $(window).scrollTop();//被捲上去的那部分
            var divTop = $("#example").offset().top;//盒子距離瀏覽器頂部的距離

            if(ks_area + scrollHeight >= divTop){
                $("#example").addClass("fadeInLeft");
            }
            document.title = ks_area+'-'+scrollHeight+'-'+divTop;
        });

在線演示

3.2 jquery滾動到底部和頂部加載

<div id="example" ></div>
<script src="http://apps./libs/jquery/2.1.1/jquery.min.js"></script>

#example {
            width: 500px;
            height: 350px;
            background: red;
            margin: 1000px auto 0 auto;
}

$(window).scroll(function(){
    var ks_area = $(window).height();
    var scrollTop = $(window).scrollTop();
    var wholeHeight = $(document).height();

    if(ks_area + scrollTop >=wholeHeight ){
        alert("已經到底部了");
    }else if(scrollTop == 0){
        alert("已經到頭部了");
    }
})

在線演示

（完）原文鏈接 http://blog./2016/12/13/js-props

聲明：本文根據慕課網學習視頻整理

強烈建議打開控制台自己動手練習一遍，這樣印象才會深刻

第一部分 JavaScript中的寬高屬性

一、與window相關的寬高屬性

1.1 window.location和document.location

window對象的location屬性引用的是location對象，表示該窗口中當前顯示文檔的URL
document的對象的location屬性也是引用location對象
所以 window.location === document.location //true

1.2 window.screen

window.screen包含有關用戶屏幕的信息。它包括：
- window.screen.width
- window.screen.height
- window.screen.availHeight
- window.screen.availWidth
- window.screenTop
- window.screenLeft

window.screen

1.3 與window相關的寬高

window.innerWidth 內部的寬度
window.innerHeight 內部的高度
window.outWidth 外部的寬度
window.outHeight 外部的高度

與window相關的寬高

二、與document相關的寬高屬性

2.1與client相關的寬高

document.body.clientWidth 元素寬度（可視內容區+內邊距）
document.body.clientHeight元素高度（可視內容區+內邊距）

example1：

body{ 
    border: 20px solid #000; 
    margin: 10px; 
    padding: 40px; 
    background: #eee; 
    height: 350px; 
    width: 500px; 
    overflow: scroll; 
} 
console.log(document.body.clientWidth);  // 350+padding(80) = 430
console.log(document.body.clientHeight);  // 500 + padding(80) = 580

example2: 在div中添加文字，指導出現滾動條

#exp2 {
    width:200px;
    height:200px;
    background:red;
    border:1px solid #000;
    overflow:auto;
}

var test = document.getElementById("exp2");

console,log(test.clientHeight); // 200
console.log(test.clientWidth); //

window7下test.clientWidth

小結clientWidth和clientHeight
- 無padding無滾動： clientWidth = 盒子的width
- 有padding無滾動： clientWidth = 盒子的width + 盒子的padding * 2
- 有padding有滾動： clientWidth = 盒子和width + 盒子的padding * 2- 滾動軸寬度

document.body.clientLeft
document.body.clientTop

這兩個返回的是元素周圍邊框的厚度，如果不指定一個邊框或者不定位該元素，它的值就是0

例：

body{ 
    border: 20px solid #000; 
    margin: 10px; 
    padding: 40px; 
    background: #eee; 
    height: 350px; 
    width: 500px; 
    overflow: scroll; 
} 
console.log(document.body.clientLeft);  // 20
console.log(document.body.clientTop);  // 20

小結clientLeft和clientTop

這一對屬性是用來讀取元素的border的寬度和高度的
- clientTop = border-top
- clientLeft = border-left

2.2 與offset相關的寬高

document.body.offsetWidth（元素的border+padding+content的寬度）
document.body.offsetHeight（元素的border+padding+content的高度）

該屬性和其內部的內容是否超出元素大小無關，只和本來設定的border以及width和height有關

例：

body{ 
    border: 20px solid #000; 
    margin: 10px; 
    padding: 40px; 
    background: #eee; 
    height: 350px; 
    width: 500px; 
    overflow: scroll; 
} 
console.log(document.body.offsetWidth);  // 470 = padding*2 + 350 + border*2
console.log(document.body.offsetHeight);  // 620 = padding*2 + 500 + border*2

小結offsetWidth和offsetHeight

無padding無滾動無border
- offsetWidth = clientWidth = 盒子的寬度
有padding無滾動有border
- offsetWidth = 盒子的寬度 + 盒子padding2 + 盒子邊框2 = clientWidth + 邊框寬度*2
有padding有滾動，且滾動是顯示的，有border
- offsetWidth = 盒子寬度 + 盒子padding2 + 盒子邊框2 = clientWidth + 滾動軸寬度 + 邊框寬度*2

document.offsetLeft
document.offsetTop

瞭解這兩個屬性我們必須先瞭解它，什麼是offsetParent

如果當前元素的父級元素沒有進行CSS定位（position為absolute或relative）,offsetParent為body.
假如當前元素的父級元素中有CSS定位，offsetParent取最近的那個父級元素

offsetLeft的兼容性問題：

在IE6/7中
- offsetLeft = offsetParent的padding-left + 當前元素的margin-left
在IE8/9/10以及chrome中
- offsetLeft = offsetParent的margin-left + offsetParent的border寬度 + offsetParent的padding-left + 當前元素的margin-left
在FireFox中
- offsetLeft = offsetParent的margin-left + 當前元素的margin-left + offsetParent的padding-left

例：

body{ 
    border: 20px solid #000; 
    margin: 10px; 
    padding: 40px; 
    background: #eee; 
    height: 350px; 
    width: 500px; 
    overflow: scroll; 
} 

#exp {
   width:400px;
   height:200px;
   padding:20px;
   margin:10px;
   background:red;
   border:20px solid #000;
   overflow:auto;
}
var div = document.getElementById("exp");

在IE8/9/10以及chrome中：
- div.offsetLeft = 本身的margin10 + 父級元素的padding40 + margin10 + border20 = 80
- div.offsetTop = 本身的margin10 + 父級元素的padding40 + margin10 + border20 = 80
在FireFox：（相比chrome中少了border）
- div.offsetLeft = 本身的margin10 + 父級元素的padding40 + margin10 = 60
- div.offsetTop = 本身的margin10 + 父級元素的padding40 + margin10 = 60
在IE6/7中：（相比在FireFox，不但少了border還少了父級元素的margin）
- div.offsetLeft = 本身的margin10 + 父級元素的padding40 = 50
- div.offsetTop = 本身的margin10 + 父級元素的padding40 = 50

2.3與scroll相關的寬高 (實際項目中用的最多)

document.body.scrollWidth
document.body.scrollHeight

document.body的scrollWidth和scrollHeight與div的scrollWidth和scrollHeight是有區別的

例：

body{ 
    border: 20px solid #000; 
    margin: 10px; 
    padding: 40px; 
    background: #eee; 
    height: 350px; 
    width: 500px; 
    overflow: scroll; 
}

document.body.scrollHeight; // 
document.body.scrollWidth; //

當給定寬高小於瀏覽器窗口的寬高
- scrollWidth = 通常是瀏覽器窗口的寬度
- scrollHeight = 通常是瀏覽器窗口的高度
當給定寬高大於瀏覽器窗口的寬高，且內容小於給定寬高的時候
- scrollWidth = 給定寬度 + 其所有的padding + margin + border
- scrollHeight = 給定高度 + 其所有的padding + margin + border
當給定寬高大於瀏覽器窗口寬高，且內容大於給定寬高
- scrollWidth = 內容寬度 + 其所有的padding + margin + border
- scrollHeight = 內容高度 + 其所有的padding + margin + border

在某div中的scrollWidth和scrollHeight

無滾動軸時：
- scrollWidth = clientWidth = 盒子寬度 + 盒子padding*2

無滾動軸時

有滾動軸時：
- scrollWidth = 實際內容的寬度 + padding*2
- scrollHeight = 實際內容的高度 + padding*2

有滾動軸時

document.body.scrollLeft
document.body.scrollTop

與前面不同的是，這對屬性是可讀寫的，指的是當元素其中的超出其寬高的時候，元素被捲起來的高度和寬度

#exp {
   width:400px;
   height:200px;
   padding:20px;
   margin:10px;
   background:red;
   border:20px solid #000;
   overflow-y:scroll;
}

var mydiv = document.getElementById("exp");

mydiv.scrollTop ;  //默認情況下是0 
mydiv.scrollLeft ; //默認情況下是0 

//可以改寫它

mydiv.scrollTop = 20;
console.log(mydiv.scrollTop)

scrollTop和scrollLeft

obj.style.width和obj.style.height

2.4 documentElement和body的關係

是父子級的關係

body{ 
    border: 20px solid #000; 
    margin: 10px; 
    padding: 40px; 
    background: #eee; 
    height: 350px; 
    width: 500px; 
    overflow: scroll; 
}

#exp {
   width:400px;
   height:200px;
   padding:20px;
   margin:10px;
   background:red;
   border:20px solid #000;
   overflow-y:scroll;
}

console.log(document); //document
console.log(document.documentElement); //html
console.log(document.body); //body

Paste_Image.png

兼容問題推薦使用獲取瀏覽器窗口可視區域大小

document.body.clientWidth || document.documentElement.clientWidth;
document.body.clientHeight || document.documentElement.clientHeight;

三、Event對象的5種坐標

Event對象的5種坐標

例：

<div id="example" 
style="width: 200px;height: 200px;background: red;margin: 100px auto;"></div>

var example = document.getElementById("example");
example.onclick = function(e){
    console.log("clientX "+e.clientX + " : " + " clientY "+e.clientY);
    console.log("screenX "+e.screenX + " : " + " screenY "+e.screenY);
    console.log("offsetX "+e.offsetX + " : " + " offsetY "+e.offsetY);
    console.log("pageX "+e.pageX + " : " + " pageY "+e.pageY);
    console.log("x "+e.x + " : " + " y "+e.y);
}

Event對象的5種坐標

四、 js各種寬高的應用

example1：可視區域加載

用來解決offset的兼容性難問題

<div id="example1" ></div>

#example1 {
            width: 500px;
            height: 350px;
            background: red;
            margin: 1000px auto 0 auto;
        }
        @-webkit-keyframes fadeInLeft{
            0%{
                opacity: 0;
                transform: translate3d(-100%,0,0);
            }
            100%{
                opacity: 1;
                transform: none;

            }
        }
            .fadeInLeft {
                animation-name: fadeInLeft;
                animation-duration: 2s;
            }

function showDiv(){
            var example = document.getElementById("example");
            var clients = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;//可視區域的高度
            var divTop = example.getBoundingClientRect().top;
            if(divTop <= clients){
                example.classList.add("fadeInLeft");
                              //  這裡可以通過setAttribute設置圖片的src按需加載
            }
            document.title = clients+"---"+divTop;
        }

window.onscroll = showDiv;

在線演示

example2：網頁滾動到頂部或者底部

<div id="example2" ></div>

#example2 {
            width: 500px;
            height: 350px;
            background: red;
            margin: 1000px auto 0 auto;
}

function scrollTopOrBottom(){
            var example2 = document.getElementById("example");
            var clients = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;//可視區域的高度，兼容性寫法
            var scrollTop = document.body.scrollTop;
            var wholeHeight = document.body.scrollHeight;
            if(clients + scrollTop >= wholeHeight){
                alert("我已經到了底部!");
                              // 這裡可以調用Ajax分頁加載到頁面中，實現多頁加載功能
            }else if(scrollTop == 0){
                alert("我已經到了頂部了!");

            }
            document.title = (clients + scrollTop)+"---"+wholeHeight+"--"+scrollTop;
        }

window.onscroll = scrollTopOrBottom;

在線演示

example3：DIV滾動到底部加載

<div id="example3" >
            DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載
            DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載
            DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載
            DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載
            DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載
            DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載
</div>

#example3 {
            width: 500px;
            height: 400px;
            background: red;
            margin: 10px auto;
            padding: 10px;
            overflow-y: scroll;
}

var div = document.getElementById("example3");
        function divScroll(){

            var wholeHeight = div.scrollHeight;//滾動區域高度
            var divScrollTop = div.scrollTop;//捲上去的那部分高度
            var divHeight = div.clientHeight; //div的可視區域的高度


            if(divScrollTop + divHeight >= wholeHeight){
                alert("我已經到了底部!");
               // 這裡可以在div中通過滾動加載分頁按需顯示
            }else if(divScrollTop == 0){
                alert("我已經到了頂部了!");
            }
            document.title = (divScrollTop + divHeight)+"---"+wholeHeight+"--"+divScrollTop;
}

div.onscroll = divScroll;

在線演示

example4：計算滾動軸的寬度

    //獲取滾動軸的寬度
        function getScrollBar(){
            var el = document.createElement("p");
            var styles = {
                width:"100px",
                height:"100px",
                overflowY:"scroll"
            };
            for (var prop in styles){
                el.style[prop] = styles[prop];//把 styles上的屬性全部遍歷拷貝到el.style上

            }
            document.body.appendChild(el);
            var scrollBarWidth = el.offsetWidth - el.clientWidth;
            el.remove();
            return scrollBarWidth;
        }
        alert(getScrollBar());//17

在線演示

五、js中的寬高屬性總結

Paste_Image.png

document相關的寬高

第二部分 jQuery中的寬高屬性

一、jquery相關寬高介紹

1.1 width()
- 特殊元素window.document只可以讀，普通元素可以讀寫，width()返回結果無單位，css("width")的結果有單位

width--height

width

1.2 innerWidth()
- 包含padding（不推薦window,document調用）
1.3 innerHeight()

innerWidth--innerHeight

innerWidth

1.4 outerWidth()
- 包含padding和border，當傳true時包含marging，不傳時不包含marging（不推薦window,document調用）
1.5 outerHeight()

outerWidth--outerHeight

outerWidth

1.6 scrollLeft():
- 相對於水平滾動條左邊的距離，如果滾動條非常左、或者元素不能被滾動，這個值為0；
1.7 scrollTop():
- 相對於垂直滾動條上邊的距離，如果滾動條非常上、或者元素不能被滾動，這個值為0；
1.8 .offset():
- 相對於document的當前坐標值(相對於body左上角的left,top的值)；
1.9 .position():
- 相對於offset parent的當前坐標值(相對於offset parent元素的左上角的left、top的值)

offset和position區別

二、jquery相關寬高舉例

2.1 exmaple1

example1

    <div class="parentDiv">
        <div class="childrenDiv"></div>
    </div>

html,body {
    margin:10px;
    border:5px solid red;
    padding:20px;
}
.parentDiv {
    width:800px;
    height:500px;
    margin:5px auto;
    background:#FF6600;
    border:5px dashed green;padding:30px;position:relative;

}
.childrenDiv {
    width:300px;
    height:500px;
    margin:5px auto;
    background:yellow;
    border:5px solid black;
    padding:5px;
    box-sizing:border-box;/*包括padding和border的值*/
}

//特殊元素的高度
//window  document
console.log("$(window).height()"+$(window).height());
console.log("$(document).height()"+$(document).height());

//innerHeight 
console.log("$(window).innerHeight()"+$(window).innerHeight());
console.log("$(document).innerHeight()"+$(document).innerHeight());

//普通child元素的高度

//480 = 500 - border*2 - padding*2 (因為設置了box-sizing，box-sizing把border和padding的值計算了進去)
console.log('$(".childrenDiv").height()'+ $(".childrenDiv").height());

//490 = 500 - border*2 - padding*2（innerHeight不包括padding）
console.log('$(".childrenDiv").innerHeight()'+ $(".childrenDiv").innerHeight());

//500 = 500  不包括margin
console.log('$(".childrenDiv").outerHeight()'+ $(".childrenDiv").outerHeight());

//510 = 500 + margin true包括margin
console.log('$(".childrenDiv").outerHeight()'+ $(".childrenDiv").outerHeight(true));

//scrollTop

$(window).scroll(function(){
    document.title = "scrollTop  "+$(this).scrollTop();
});

// jquery寬高演示之offset和position

console.log('$(".childrenDiv").offset().top '+$(".childrenDiv").offset().top);
console.log('$(".childrenDiv").offset().left '+$(".childrenDiv").offset().left);
console.log('$(".childrenDiv").position().top '+$(".childrenDiv").position().top);
console.log('$(".childrenDiv").position().top '+$(".childrenDiv").position().left);

Paste_Image.png

offset-position

在線演示

三、jquery各種寬高應用

3.1 jquery可視區域加載

<div id="example" ></div>

#example {
            width: 500px;
            height: 350px;
            background: red;
            margin: 1000px auto 0 auto;
        }
        @-webkit-keyframes fadeInLeft{
            0%{
                opacity: 0;
                transform: translate3d(-100%,0,0);
            }
            100%{
                opacity: 1;
                transform: none;

            }
        }
            .fadeInLeft {
                animation-name: fadeInLeft;
                animation-duration: 2s;
            }

        $(window).scroll(function(){
            var ks_area = $(window).height();//可視區域高度
            var scrollHeight = $(window).scrollTop();//被捲上去的那部分
            var divTop = $("#example").offset().top;//盒子距離瀏覽器頂部的距離

            if(ks_area + scrollHeight >= divTop){
                $("#example").addClass("fadeInLeft");
            }
            document.title = ks_area+'-'+scrollHeight+'-'+divTop;
        });

在線演示

3.2 jquery滾動到底部和頂部加載

<div id="example" ></div>
<script src="http://apps./libs/jquery/2.1.1/jquery.min.js"></script>

#example {
            width: 500px;
            height: 350px;
            background: red;
            margin: 1000px auto 0 auto;
}

$(window).scroll(function(){
    var ks_area = $(window).height();
    var scrollTop = $(window).scrollTop();
    var wholeHeight = $(document).height();

    if(ks_area + scrollTop >=wholeHeight ){
        alert("已經到底部了");
    }else if(scrollTop == 0){
        alert("已經到頭部了");
    }
})

在線演示

（完）原文鏈接 http://blog./2016/12/13/js-props

聲明：本文根據慕課網學習視頻整理

強烈建議打開控制台自己動手練習一遍，這樣印象才會深刻

第一部分 JavaScript中的寬高屬性

一、與window相關的寬高屬性

1.1 window.location和document.location

window對象的location屬性引用的是location對象，表示該窗口中當前顯示文檔的URL
document的對象的location屬性也是引用location對象
所以 window.location === document.location //true

1.2 window.screen

window.screen包含有關用戶屏幕的信息。它包括：
- window.screen.width
- window.screen.height
- window.screen.availHeight
- window.screen.availWidth
- window.screenTop
- window.screenLeft

window.screen

1.3 與window相關的寬高

window.innerWidth 內部的寬度
window.innerHeight 內部的高度
window.outWidth 外部的寬度
window.outHeight 外部的高度

與window相關的寬高

二、與document相關的寬高屬性

2.1與client相關的寬高

document.body.clientWidth 元素寬度（可視內容區+內邊距）
document.body.clientHeight元素高度（可視內容區+內邊距）

example1：

body{ 
    border: 20px solid #000; 
    margin: 10px; 
    padding: 40px; 
    background: #eee; 
    height: 350px; 
    width: 500px; 
    overflow: scroll; 
} 
console.log(document.body.clientWidth);  // 350+padding(80) = 430
console.log(document.body.clientHeight);  // 500 + padding(80) = 580

example2: 在div中添加文字，指導出現滾動條

#exp2 {
    width:200px;
    height:200px;
    background:red;
    border:1px solid #000;
    overflow:auto;
}

var test = document.getElementById("exp2");

console,log(test.clientHeight); // 200
console.log(test.clientWidth); //

window7下test.clientWidth

小結clientWidth和clientHeight
- 無padding無滾動： clientWidth = 盒子的width
- 有padding無滾動： clientWidth = 盒子的width + 盒子的padding * 2
- 有padding有滾動： clientWidth = 盒子和width + 盒子的padding * 2- 滾動軸寬度

document.body.clientLeft
document.body.clientTop

這兩個返回的是元素周圍邊框的厚度，如果不指定一個邊框或者不定位該元素，它的值就是0

例：

body{ 
    border: 20px solid #000; 
    margin: 10px; 
    padding: 40px; 
    background: #eee; 
    height: 350px; 
    width: 500px; 
    overflow: scroll; 
} 
console.log(document.body.clientLeft);  // 20
console.log(document.body.clientTop);  // 20

小結clientLeft和clientTop

這一對屬性是用來讀取元素的border的寬度和高度的
- clientTop = border-top
- clientLeft = border-left

2.2 與offset相關的寬高

document.body.offsetWidth（元素的border+padding+content的寬度）
document.body.offsetHeight（元素的border+padding+content的高度）

該屬性和其內部的內容是否超出元素大小無關，只和本來設定的border以及width和height有關

例：

body{ 
    border: 20px solid #000; 
    margin: 10px; 
    padding: 40px; 
    background: #eee; 
    height: 350px; 
    width: 500px; 
    overflow: scroll; 
} 
console.log(document.body.offsetWidth);  // 470 = padding*2 + 350 + border*2
console.log(document.body.offsetHeight);  // 620 = padding*2 + 500 + border*2

小結offsetWidth和offsetHeight

無padding無滾動無border
- offsetWidth = clientWidth = 盒子的寬度
有padding無滾動有border
- offsetWidth = 盒子的寬度 + 盒子padding2 + 盒子邊框2 = clientWidth + 邊框寬度*2
有padding有滾動，且滾動是顯示的，有border
- offsetWidth = 盒子寬度 + 盒子padding2 + 盒子邊框2 = clientWidth + 滾動軸寬度 + 邊框寬度*2

document.offsetLeft
document.offsetTop

瞭解這兩個屬性我們必須先瞭解它，什麼是offsetParent

如果當前元素的父級元素沒有進行CSS定位（position為absolute或relative）,offsetParent為body.
假如當前元素的父級元素中有CSS定位，offsetParent取最近的那個父級元素

offsetLeft的兼容性問題：

在IE6/7中
- offsetLeft = offsetParent的padding-left + 當前元素的margin-left
在IE8/9/10以及chrome中
- offsetLeft = offsetParent的margin-left + offsetParent的border寬度 + offsetParent的padding-left + 當前元素的margin-left
在FireFox中
- offsetLeft = offsetParent的margin-left + 當前元素的margin-left + offsetParent的padding-left

例：

body{ 
    border: 20px solid #000; 
    margin: 10px; 
    padding: 40px; 
    background: #eee; 
    height: 350px; 
    width: 500px; 
    overflow: scroll; 
} 

#exp {
   width:400px;
   height:200px;
   padding:20px;
   margin:10px;
   background:red;
   border:20px solid #000;
   overflow:auto;
}
var div = document.getElementById("exp");

在IE8/9/10以及chrome中：
- div.offsetLeft = 本身的margin10 + 父級元素的padding40 + margin10 + border20 = 80
- div.offsetTop = 本身的margin10 + 父級元素的padding40 + margin10 + border20 = 80
在FireFox：（相比chrome中少了border）
- div.offsetLeft = 本身的margin10 + 父級元素的padding40 + margin10 = 60
- div.offsetTop = 本身的margin10 + 父級元素的padding40 + margin10 = 60
在IE6/7中：（相比在FireFox，不但少了border還少了父級元素的margin）
- div.offsetLeft = 本身的margin10 + 父級元素的padding40 = 50
- div.offsetTop = 本身的margin10 + 父級元素的padding40 = 50

2.3與scroll相關的寬高 (實際項目中用的最多)

document.body.scrollWidth
document.body.scrollHeight

document.body的scrollWidth和scrollHeight與div的scrollWidth和scrollHeight是有區別的

例：

body{ 
    border: 20px solid #000; 
    margin: 10px; 
    padding: 40px; 
    background: #eee; 
    height: 350px; 
    width: 500px; 
    overflow: scroll; 
}

document.body.scrollHeight; // 
document.body.scrollWidth; //

當給定寬高小於瀏覽器窗口的寬高
- scrollWidth = 通常是瀏覽器窗口的寬度
- scrollHeight = 通常是瀏覽器窗口的高度
當給定寬高大於瀏覽器窗口的寬高，且內容小於給定寬高的時候
- scrollWidth = 給定寬度 + 其所有的padding + margin + border
- scrollHeight = 給定高度 + 其所有的padding + margin + border
當給定寬高大於瀏覽器窗口寬高，且內容大於給定寬高
- scrollWidth = 內容寬度 + 其所有的padding + margin + border
- scrollHeight = 內容高度 + 其所有的padding + margin + border

在某div中的scrollWidth和scrollHeight

無滾動軸時：
- scrollWidth = clientWidth = 盒子寬度 + 盒子padding*2

無滾動軸時

有滾動軸時：
- scrollWidth = 實際內容的寬度 + padding*2
- scrollHeight = 實際內容的高度 + padding*2

有滾動軸時

document.body.scrollLeft
document.body.scrollTop

與前面不同的是，這對屬性是可讀寫的，指的是當元素其中的超出其寬高的時候，元素被捲起來的高度和寬度

#exp {
   width:400px;
   height:200px;
   padding:20px;
   margin:10px;
   background:red;
   border:20px solid #000;
   overflow-y:scroll;
}

var mydiv = document.getElementById("exp");

mydiv.scrollTop ;  //默認情況下是0 
mydiv.scrollLeft ; //默認情況下是0 

//可以改寫它

mydiv.scrollTop = 20;
console.log(mydiv.scrollTop)

scrollTop和scrollLeft

obj.style.width和obj.style.height

2.4 documentElement和body的關係

是父子級的關係

body{ 
    border: 20px solid #000; 
    margin: 10px; 
    padding: 40px; 
    background: #eee; 
    height: 350px; 
    width: 500px; 
    overflow: scroll; 
}

#exp {
   width:400px;
   height:200px;
   padding:20px;
   margin:10px;
   background:red;
   border:20px solid #000;
   overflow-y:scroll;
}

console.log(document); //document
console.log(document.documentElement); //html
console.log(document.body); //body

Paste_Image.png

兼容問題推薦使用獲取瀏覽器窗口可視區域大小

document.body.clientWidth || document.documentElement.clientWidth;
document.body.clientHeight || document.documentElement.clientHeight;

三、Event對象的5種坐標

Event對象的5種坐標

例：

<div id="example" 
style="width: 200px;height: 200px;background: red;margin: 100px auto;"></div>

var example = document.getElementById("example");
example.onclick = function(e){
    console.log("clientX "+e.clientX + " : " + " clientY "+e.clientY);
    console.log("screenX "+e.screenX + " : " + " screenY "+e.screenY);
    console.log("offsetX "+e.offsetX + " : " + " offsetY "+e.offsetY);
    console.log("pageX "+e.pageX + " : " + " pageY "+e.pageY);
    console.log("x "+e.x + " : " + " y "+e.y);
}

Event對象的5種坐標

四、 js各種寬高的應用

example1：可視區域加載

用來解決offset的兼容性難問題

<div id="example1" ></div>

#example1 {
            width: 500px;
            height: 350px;
            background: red;
            margin: 1000px auto 0 auto;
        }
        @-webkit-keyframes fadeInLeft{
            0%{
                opacity: 0;
                transform: translate3d(-100%,0,0);
            }
            100%{
                opacity: 1;
                transform: none;

            }
        }
            .fadeInLeft {
                animation-name: fadeInLeft;
                animation-duration: 2s;
            }

function showDiv(){
            var example = document.getElementById("example");
            var clients = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;//可視區域的高度
            var divTop = example.getBoundingClientRect().top;
            if(divTop <= clients){
                example.classList.add("fadeInLeft");
                              //  這裡可以通過setAttribute設置圖片的src按需加載
            }
            document.title = clients+"---"+divTop;
        }

window.onscroll = showDiv;

在線演示

example2：網頁滾動到頂部或者底部

<div id="example2" ></div>

#example2 {
            width: 500px;
            height: 350px;
            background: red;
            margin: 1000px auto 0 auto;
}

function scrollTopOrBottom(){
            var example2 = document.getElementById("example");
            var clients = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;//可視區域的高度，兼容性寫法
            var scrollTop = document.body.scrollTop;
            var wholeHeight = document.body.scrollHeight;
            if(clients + scrollTop >= wholeHeight){
                alert("我已經到了底部!");
                              // 這裡可以調用Ajax分頁加載到頁面中，實現多頁加載功能
            }else if(scrollTop == 0){
                alert("我已經到了頂部了!");

            }
            document.title = (clients + scrollTop)+"---"+wholeHeight+"--"+scrollTop;
        }

window.onscroll = scrollTopOrBottom;

在線演示

example3：DIV滾動到底部加載

<div id="example3" >
            DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載
            DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載
            DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載
            DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載
            DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載
            DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載DIV滾動到底部加載
</div>

#example3 {
            width: 500px;
            height: 400px;
            background: red;
            margin: 10px auto;
            padding: 10px;
            overflow-y: scroll;
}

var div = document.getElementById("example3");
        function divScroll(){

            var wholeHeight = div.scrollHeight;//滾動區域高度
            var divScrollTop = div.scrollTop;//捲上去的那部分高度
            var divHeight = div.clientHeight; //div的可視區域的高度


            if(divScrollTop + divHeight >= wholeHeight){
                alert("我已經到了底部!");
               // 這裡可以在div中通過滾動加載分頁按需顯示
            }else if(divScrollTop == 0){
                alert("我已經到了頂部了!");
            }
            document.title = (divScrollTop + divHeight)+"---"+wholeHeight+"--"+divScrollTop;
}

div.onscroll = divScroll;

在線演示

example4：計算滾動軸的寬度

    //獲取滾動軸的寬度
        function getScrollBar(){
            var el = document.createElement("p");
            var styles = {
                width:"100px",
                height:"100px",
                overflowY:"scroll"
            };
            for (var prop in styles){
                el.style[prop] = styles[prop];//把 styles上的屬性全部遍歷拷貝到el.style上

            }
            document.body.appendChild(el);
            var scrollBarWidth = el.offsetWidth - el.clientWidth;
            el.remove();
            return scrollBarWidth;
        }
        alert(getScrollBar());//17

在線演示

五、js中的寬高屬性總結

Paste_Image.png

document相關的寬高

第二部分 jQuery中的寬高屬性

一、jquery相關寬高介紹

1.1 width()
- 特殊元素window.document只可以讀，普通元素可以讀寫，width()返回結果無單位，css("width")的結果有單位

width--height

width

1.2 innerWidth()
- 包含padding（不推薦window,document調用）
1.3 innerHeight()

innerWidth--innerHeight

innerWidth

1.4 outerWidth()
- 包含padding和border，當傳true時包含marging，不傳時不包含marging（不推薦window,document調用）
1.5 outerHeight()

outerWidth--outerHeight

outerWidth

1.6 scrollLeft():
- 相對於水平滾動條左邊的距離，如果滾動條非常左、或者元素不能被滾動，這個值為0；
1.7 scrollTop():
- 相對於垂直滾動條上邊的距離，如果滾動條非常上、或者元素不能被滾動，這個值為0；
1.8 .offset():
- 相對於document的當前坐標值(相對於body左上角的left,top的值)；
1.9 .position():
- 相對於offset parent的當前坐標值(相對於offset parent元素的左上角的left、top的值)

offset和position區別

二、jquery相關寬高舉例

2.1 exmaple1

example1

    <div class="parentDiv">
        <div class="childrenDiv"></div>
    </div>

html,body {
    margin:10px;
    border:5px solid red;
    padding:20px;
}
.parentDiv {
    width:800px;
    height:500px;
    margin:5px auto;
    background:#FF6600;
    border:5px dashed green;padding:30px;position:relative;

}
.childrenDiv {
    width:300px;
    height:500px;
    margin:5px auto;
    background:yellow;
    border:5px solid black;
    padding:5px;
    box-sizing:border-box;/*包括padding和border的值*/
}

//特殊元素的高度
//window  document
console.log("$(window).height()"+$(window).height());
console.log("$(document).height()"+$(document).height());

//innerHeight 
console.log("$(window).innerHeight()"+$(window).innerHeight());
console.log("$(document).innerHeight()"+$(document).innerHeight());

//普通child元素的高度

//480 = 500 - border*2 - padding*2 (因為設置了box-sizing，box-sizing把border和padding的值計算了進去)
console.log('$(".childrenDiv").height()'+ $(".childrenDiv").height());

//490 = 500 - border*2 - padding*2（innerHeight不包括padding）
console.log('$(".childrenDiv").innerHeight()'+ $(".childrenDiv").innerHeight());

//500 = 500  不包括margin
console.log('$(".childrenDiv").outerHeight()'+ $(".childrenDiv").outerHeight());

//510 = 500 + margin true包括margin
console.log('$(".childrenDiv").outerHeight()'+ $(".childrenDiv").outerHeight(true));

//scrollTop

$(window).scroll(function(){
    document.title = "scrollTop  "+$(this).scrollTop();
});

// jquery寬高演示之offset和position

console.log('$(".childrenDiv").offset().top '+$(".childrenDiv").offset().top);
console.log('$(".childrenDiv").offset().left '+$(".childrenDiv").offset().left);
console.log('$(".childrenDiv").position().top '+$(".childrenDiv").position().top);
console.log('$(".childrenDiv").position().top '+$(".childrenDiv").position().left);

Paste_Image.png

offset-position

在線演示

三、jquery各種寬高應用

3.1 jquery可視區域加載

<div id="example" ></div>

#example {
            width: 500px;
            height: 350px;
            background: red;
            margin: 1000px auto 0 auto;
        }
        @-webkit-keyframes fadeInLeft{
            0%{
                opacity: 0;
                transform: translate3d(-100%,0,0);
            }
            100%{
                opacity: 1;
                transform: none;

            }
        }
            .fadeInLeft {
                animation-name: fadeInLeft;
                animation-duration: 2s;
            }

        $(window).scroll(function(){
            var ks_area = $(window).height();//可視區域高度
            var scrollHeight = $(window).scrollTop();//被捲上去的那部分
            var divTop = $("#example").offset().top;//盒子距離瀏覽器頂部的距離

            if(ks_area + scrollHeight >= divTop){
                $("#example").addClass("fadeInLeft");
            }
            document.title = ks_area+'-'+scrollHeight+'-'+divTop;
        });

在線演示

3.2 jquery滾動到底部和頂部加載

<div id="example" ></div>
<script src="http://apps./libs/jquery/2.1.1/jquery.min.js"></script>

#example {
            width: 500px;
            height: 350px;
            background: red;
            margin: 1000px auto 0 auto;
}

$(window).scroll(function(){
    var ks_area = $(window).height();
    var scrollTop = $(window).scrollTop();
    var wholeHeight = $(document).height();

    if(ks_area + scrollTop >=wholeHeight ){
        alert("已經到底部了");
    }else if(scrollTop == 0){
        alert("已經到頭部了");
    }
})

在線演示

（完）