js 关于BOM浏览器兼容问题 函数封装

    1.    作用：获取可视区宽度(兼容所有浏览器)
       返回值：获取可视区宽度

function getWidth(){
			if(window.innerWidth){
				return window.innerWidth;
			}
			else{


				if(document.compatMode == "CSS1Compat"){
					return document.documentElement.clientWidth;
				}
				else{
					return document.body.clientWidth;
				}
			}
		}

   测试案例 ： 
   var result = getWidth();
    alert(result);
   返回结果：可视区宽度

2.   作用：获取可视区高度(兼容所有浏览器)
  返回值：获取可视区高度

function getHeight(){
			if(window.innerHeight){
				return window.innerHeight;
			}
			else{
				if(document.compatMode == "CSS1Compat"){
					return document.documentElement.clientHeight;
				}
				else{
					return document.body.clientHeight;
				}
			}
		}

  测试案例：
   var result = getWidth();
    alert(result);
  返回结果：可视区宽高

 
在chrome中不支持document.documentElement.scrollTop，该属性值为0
在chrome中获取滚动条卷曲高度要使用document.body.scrollTop
在firefox中不支持document.body.scrollTop，应该使用
document.documentElement.scrollTop


      3.    作用：获取获取滚动条卷曲高度(兼容所有浏览器)
         返回值：滚动条卷曲高度

    解决办法1：

function getScrollTop1(){
			if(document.documentElement.scrollTop){
				return document.documentElement.scrollTop;
			} 
			else{
				return document.body.scrollTop;
			}
		}

解决方法2：

	function getScrollTop2(){
			return document.documentElement.scrollTop || document.body.scrollTop;
		}

       解决方法3：

function getScrollTop3(){
			return document.documentElement.scrollTop + document.body.scrollTop;
		}

      测试案例：
   var result = getScrollTop1();
    alert(result);
     返回结果：滚动条卷曲高度
   


4.    作用：将滚动条设置到给定的位置，兼容所有浏览器
    返回值：将滚动条设置到给定的位置

function setScrollTop(top){
			document.documentElement.scrollTop = document.body.scrollTop = top;
		}

    测试案例：
    setScrollTop(0);
    返回结果：将滚动条设置窗口顶部