获取页面的宽高

1 窗口的滚动事件

  function scroll() {
        return {
            top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
            left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
        };

    }

 

2 封装获取页面可视区的宽高

    function client() {
        return {
            //网页可视区的宽度
            width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
            //高度
            height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
        };
    }

3 事件对象的兼容性写法

 document.onclick = function (event) {
        var event = event || window.event;//支持所有浏览器
        
    };

4页面坐标进行兼容处理

 function (event) {
        var event = event || window.event;
        //对page进行兼容处理
        var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
        var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
    };

5 页面三大坐标

 document.onclick = function (event) {
        var event = event || window.event;
        //console.log("client" + event.clientX + "---" + event.clientY);//窗口
        //console.log("page" + event.pageX + "---" + event.pageY);//页面
        //console.log("screen" + event.screenX + "---" + event.screenY);//屏幕
    
    };

6 jq获取宽高

width() /height()//元素的内容的宽高


innerWidth() /innerHeight() //包括padding


outerWidth() /outerHeight() //包括border