JS和jQuery寬高詳解（上篇）

標籤：query   瀏覽器   沒有   alt   images   type   strong   fse   str   

一、JS相關的寬高

1. 基本概念（window寬高和頁面元素div的寬高）
2. 執行個體練習

      1）可視地區計算

      2）滾動到頂部，底部的實現

      3）捲軸的計算

 

二.jQuery相關的寬高

     1.基本概念

      2.執行個體實現

 

—————————————————————————————————————————————-

 

在此之前要明白window，document對象的區別，以便以後的調用。

 

window對象就是視窗，也就瀏覽器開啟的視窗；

window對象下的方法可省略window對象，例如alert(),實際是window.alert();

 

document對象，document對象是window對象的一個子集，是瀏覽器去除功能表列的那一部分；

所以document.body也可以寫成window.document.body;

 

瀏覽器的HTML文檔成為document對象。

 

一、JS相關的寬高

 

1.window相關的寬高

 

window.innerWidth 與window.innerHeight   //瀏覽器視窗展示所能展示內容的高度

window.outerWidth與window.outerHeight   //瀏覽器視窗的高度，包括功能表列以及開啟的調試代碼部分

window的innerWidth和outerWidth相容IE9及以上和其它主流瀏覽器。

 

screen相關的寬高

 

screen.width與screen.height       　　　　 //指螢幕的寬高，只和裝置有關

screen.availWidth與screen.availHeight 　  //指螢幕可利用的寬高，去除螢幕的顯示欄

screen.screenLeft與screen.screenTop        //指視窗距離螢幕上邊和左邊的距離

 

2.document相關的寬高

 

1）client

 

document.body.clientWidth與document.body.clientHeight

 

這一對屬性指元素可視部分寬度和高度padding+content，只與設定的寬高有關係，和內容是否超出設定的寬高沒有關係;如果有捲軸則會減去捲軸的寬度；

 

假如無padding無捲軸

clientWidth ＝ style.width;

 

假如有padding無捲軸

clientWidth ＝ style.width +style. padding*2;

 

假如有padding有捲軸顯示

clientWidth ＝ style.width +style. padding*2 - 捲軸的寬度;

 

document.body.clientTop與document.body.clientLeft

這一對屬性指元素邊的的大小

 

2）offset

 

document.body.offsetWidth與document.body.offsetHeight

這一對屬性指元素可視部分寬度和高度padding+content+border，只與設定的寬高有關係，和內容是否超出設定的寬高沒有關係，只和設定的border、width和padding有關；

 

假如無padding無捲軸無border

offsetWidth ＝clientWidth＝ style.width;

 

假如有padding無捲軸有border

offsetWidth ＝ style.width +style. padding*2＋border寬高＊2;

offsetWidth ＝ clientWidth ＋ border寬度＊2；

 

假如有padding有捲軸且顯示有border

offsetWidth ＝ style.width +style. padding*2 ＋border寬高＊2;

offsetWidth ＝ clientWidth ＋ border寬度＊2 ＋捲軸寬度；

 

document.body.offsetLeft與document.body.offsetTop

這兩個屬性主要是相對於offsetParent而言的

 

這一對屬性在不同的瀏覽器中存在相容問題

 

3）scroll

 

document.body的scrollWidth和scrollHeight

 

document.body.scrollWidth與document.body.scrollHeight

（1）給定的寬高小於瀏覽器視窗時 

         scrollWidth通常指瀏覽器視窗的寬度；

　　  scrollHeight通常指瀏覽器視窗的高度。

 

（2）給定的寬高大與瀏覽器視窗的寬高，且內容小於給定的寬高

        scrollWidth ＝ 給定的寬度＋ 其所有的padding、margin和border；

　　 scrollHeight ＝ 給定的高度 ＋ 其所有的padding、margin和border。

       注意這裡的padding、margin和border沒有＊2

　

（3）給定的寬高大與瀏覽器視窗的寬高，且內容大於給定的寬高

　　  scrollWidth ＝ 內容寬度 ＋ 其所有的padding、margin和border；

        scrollHeight ＝ 內容高度 ＋ 其所有的padding、margin和border。

          注意這裡的padding、margin和border沒有＊2

      

 

div元素的scrollWidth和scrollHeight

（1）無捲軸時

　　  scrollWidth ＝ clientWidth ＝ style.width + padding*2;

　　  scrollHeight ＝ clientHeight ＝ style.height + padding*2;         

 

（2）有捲軸時

　　  scrollWidth  =  實際內容寬度 ＋ padding＊2；

　　  scrollHeight = 實際內容高度 ＋ padding＊2；

 

 

document.body.scrollTop與document.body.scrollLeft

這對屬性是可讀寫的，捲軸出現時被捲起的寬高。

 

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

JS基本寬高基本概念告一段落，下一篇便是相關的執行個體～～～????

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

JS和jQuery寬高詳解（上篇）