滾動條詳解及製做（三）

查看元素的幾何尺寸

domEle.getBoundingClientRect()

在獲取的dom元素上，有一個getBoundingClientRect方法，這個方法能夠獲取到元素的寬高和左上點的位置以及有下點的位置（width、height、top、left、right、bottom），注意這裏的寬高是指除去了margin的盒子模型的寬高。

可是老版本的IE瀏覽器沒有實現width和height，那麼咱們在老版本的IE計算寬高的時候就須要用bottom-top和right-left來計算寬高值了。

還有一點須要注意的是，這裏的寬高也不是實時更新的，數據只是一個副本。

咱們依然能夠封裝一個函數，能夠返回元素的寬高。

 1 Element.getElementOffset() {
 2         var objData = this.getBoundingClientRect();
 3         if(objData.width) {
 4               return {
 5                     w: objData.width,
 6                     h: objData.height
 7               }
 8         }else {
 9               return {
10                     w: objData.right - objData.left,
11                     h: objData.bottom - objData.top
12               }
13         }
14   }
15    

 

JavaScript; 「複製代碼」); 「查看純文本代碼」); 「返回代碼高亮」)

 

滾動條滾動

讓滾動條滾動的方法有三個：scroll、scrollTo、scrollBy。

這三個方法都有兩個參數，分別是x值和y值。前兩個方法的做用如出一轍，都是讓滾動條滾動到（x，y）的位置，可是最後一個scrollBy有一些區別，它是讓滾動條相對於上一個位置滾動多少距離。

咱們能夠簡單的用這個方法來實現一個自動閱讀的功能：

setInterval(function () {

      scrollBy(0, 10);

},50);

另外一個查看元素尺寸的方法

dom.offsetWidth/dom.offsetHeight

雖然前面有一個ele.getBoundingClientRect()方法，可是因爲這個方法名字是在太長了，所以用的並非很是多，相比較而言，這兩個dom元素的屬性用的更多一些。

這裏獲取的寬高值和上面的同樣，都是除去margin後的盒子模型的寬高。

查看元素的位置

dom.offsetLeft/dom.offsetTop

這兩個值分別是元素距離左側和上側的距離，這裏的值是相對於有定位的父級而言的，若是沒有有定位的父級的話，纔是相對於文檔的座標。

那麼如今就來了一個問題：如何找到有定位的父級呢？

domEle上面還有一個屬性是offsetParent，這個屬性能夠查看到元素的有定位的父級，若是沒有的話就會返回body，而body的offsetParent則是null。

咱們利用上面的信息，能夠來封裝一個函數，求元素的相對於文檔的座標。

 1  Element.prototype.getPosition = function (){
 2         if (!this.offsetParent){
 3               return {
 4                     「w」: this.offsetLeft,
 5                     「h」: this.offsetTop
 6               }
 7         }
 8         var width = this.offsetLeft,
 9               height = this.offsetTop,
10               ele = this.offsetParent;
11         while (ele.offsetParent){
12               width += this.offsetParent.offsetLeft;
13               height += this.offsetParent.offsetTop;
14               ele = ele.offsetParent;
15         }
16         return {
17               「w」: width,
18               「h」: height
19         }
20   }

 

JavaScript; 「複製代碼」); 「查看純文本代碼」); 「返回代碼高亮」)

 

那麼今天要介紹的關於獲取dom元素的尺寸以及滾動條相關的知識就這些喲~