JavaScript特効の三大シリーズのまとめ

一.オフセットシリーズ
1.オフセットシリーズの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:   ,  ,IE9+  

  document.body.scrollTop/scrollLeft

*     DTD:IE8    

 document.documentElement.scrollTop/scrollLeft 

*   /  /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.lientシリーズの4つの一般的な属性(clientTopとclientLeftはここでは紹介しない)

1. clientWidth :            

2. clientHeight:            

3. clientX :                      

4. clientY :                      

2.互換性の問題
(1)clientWidthとclientHeightの互換性問題

    //          

*     DTD:   ,  ,IE9+  

document.body.clientWidth/clientHeight

*     DTD:IE8    

document.documentElement.clientWidth/clientHeight

*   /  /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.   ,  ,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，       ！