JavaScript 特效三大系列總結

標籤：script   win   類型   gets   asc   scroll   cti   uil   attribute   

一. offset系列1. offset系列的5個屬性

1. offsetLeft : 用於擷取元素到最近的定位父盒子的左側距離    * 計算方式: 當前元素的左邊框的左側到定位父盒子的左邊框右側    * 如果父級盒子沒有定位, 那麼會接著往上找有定位的盒子    * 如果上階項目都沒有定位,那麼最後距離是與body的left值2. offsetTop : 用於擷取元素到最近定位父盒子的頂部距離    * 計算方式:當前元素的上邊框的上側到定位父盒子的上邊框下側    * 如果父級盒子沒有定位,那麼會接著往上找有定位的盒子    * 如果上階項目都沒有定位,那麼最後距離是與body的top值3. offsetWidth :用於擷取元素的真實寬度(除了margin以外的寬度)4. offsetHeight : 用於擷取元素的真實高度(除了margin以外的高度)5. offsetParent :用於擷取該元素中有定位的最近父級元素    * 如果當前元素的父級元素都沒有進行定位,那麼offsetParent為body

2. 與style.(left/top/width/height)的區別:

1. offset系列的是唯讀屬性,而通過style的方式可以讀寫2. offset系列返回的數實值型別(結果四捨五入),style返回的是字串3. offsetLeft 和 offsetTop 可以返回沒有定位的元素的left值和top值,而style不可以

二. scroll系列1.scroll系列的4個屬性

1. scrollHeight :元素中內容的實際高度(沒有邊框)    * 如果內容不足,就是元素的高度2. scrollWidth: 元素中內容的實際寬度(沒有邊框)    * 如果內容不足,就是元素的寬度3. scrollTop: onscroll事件發生時,元素向上捲曲出去的距離4. scrollLeft : onscroll事件發生時,元素向左捲曲出去的距離

2. 相容問題

(1) 相容問題

* 未聲明 DTD: Google,Firefox,IE9+支援  document.body.scrollTop/scrollLeft* 已經聲明DTD:IE8以下支援 document.documentElement.scrollTop/scrollLeft * Firefox/Google/ie9+以上支援的  window.pageYOffest/pageXOffest

(2) 相容代碼

function getScroll() {        return {            left: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0,            top: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0        };    }    使用方法:    1. 取得scrollLeft值: getScroll().left    2. 取得scrollTop值: getScroll().top

三. client系列1.client系列的4個常用屬性(clientTop和clientLeft這裡不予介紹)

1. clientWidth : 擷取網頁可視地區的寬度2. clientHeight: 擷取網頁可視地區的高度3. clientX :擷取滑鼠事件發生時的應用用戶端地區的水平座標4. clientY :擷取滑鼠事件發生時的應用用戶端地區的垂直座標

2. 相容問題

(1) clientWidth 和 clientHeight的相容問題

    //由瀏覽器對象不同導致* 未聲明 DTD: Google,Firefox,IE9+支援document.body.clientWidth/clientHeight* 已經聲明DTD:IE8以下支援document.documentElement.clientWidth/clientHeight* Firefox/Google/ie9+以上支援的 window.innerWidth/innerHeight

(2) clientWidth 和 clientHeight的相容代碼

function client(){    if(window.innerWidth){        return {            "width":window.innerWidth,            "height":window.innerHeight        };    }else if(document.compatMode === "CSS1Compat"){        return {            "width":document.documentElement.clientWidth,            "height":document.documentElement.clientHeight        };    }else{        return {            "width":document.body.clientWidth,            "height":document.body.clientHeight        };    }}    使用方法:    1. 取得clientWidth的值: client().width    2. 取得clientHeight的值: client().height

(3)clientX 和 clientY的相容問題

    //由事件參數對象的相容性問題導致1. Google,Firefox,IE9+: 事件參數對象隨著事件處理函數的參數傳入2. IE8以下: event對象必須作為window對象的一個屬性(window.event)

(4)clientX 和 clientY的相容性代碼

//將client和scroll的相容問題進行對象的封裝    var evtTools={        //擷取相容的事件參數對象        getEvt:function (e) {            return window.event?window.event:e;        },        //擷取的是可視地區的橫座標        getClientX:function (e) {            return this.getEvt(e).clientX;        },        //擷取的是可視地區的縱座標        getClientY:function (e) {            return this.getEvt(e).clientY;        },        //擷取向左捲曲出去的距離的橫座標        getScrollLeft:function () {            return window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0;        },        //擷取向上捲曲出去的距離的縱座標        getScrollTop:function () {            return window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0;        }    };

四.總結

網頁可見地區寬： document.body.clientWidth;網頁可見地區高： document.body.clientHeight;網頁可見地區寬： document.body.offsetWidth   (包括邊線的寬);網頁可見地區高： document.body.offsetHeight  (包括邊線的寬);網頁本文全文寬： document.body.scrollWidth;網頁本文全文高： document.body.scrollHeight;網頁被捲去的高： document.body.scrollTop;網頁被捲去的左： document.body.scrollLeft;網頁本文部分上： window.screenTop;網頁本文部分左： window.screenLeft;螢幕解析度的高： window.screen.height;螢幕解析度的寬： window.screen.width;螢幕可用工作區高度： window.screen.availHeight;螢幕可用工作區寬度：window.screen.availWidth;

學習過程中遇到什麼問題或者想擷取學習資源的話，歡迎加入學習交流群
343599877，我們一起學前端！

JavaScript 特效三大系列總結