js下的window.screenLeft,window.screenX,window.innerWidth等

众所周知,javascript差不多由三部分组成,ECMAscript,BOM,DOM。而BOM代表的是游览器模型,各大游览器兼容是最麻烦的,今天主要是几个游览器对窗口,视口位置、大小的兼容处理。

1、游览器视口距离屏幕的位置(左上角)left及top

ie,chrome : 支持window.screenLeft,window.screenTop  --------------ie/55,0( 默认加上上面导航栏的高度) chrome/0,0

firefog,chrome : window.screenX,window.screenY ---------------------------firefog/-8,-8       chrome /0,0

兼容:var left = typeof  window.screenLeft === "number" ? window.screenLeft : window.screenX; var top = typeof window.screenTop === "number" ? window.screenTop : window.screenY;

2、window.innerWidth、document.documentElement.clientWidth、document.body.clientWidth

var width,height;

if( window.innerWidth ){                        // firefog  和  chrome 本身也支持document.documentElement.clientWidth,直接window属性提高点点点性能

width = window.innerWidth;                      

height = window.innerHeight;

}else{

    if( document.compatMode === "CSS1Compat" ){             //兼容ie6的怪异模式BackCompat

             width = document.documentElement.clientWidth;

             height = document.documentElement.clientHeight;

    }else {

             width = document.body.clientWidth;

             height = document.body.clientHeight;

   }

}

3、

推荐阅读更多精彩内容